Forums

Joe_Temp

First off, let me say this site has been insanely helpful and it's one of the best I've ever seen as far as tutorials and tips go.

I can't seem to figure out what I'm doing wrong here. Why is my twitter "badge/box" jumping outside the wrapper when it's positioned inside of it? Everything else follows the rules but the twitter logo is going all "freebird" on me.

Here is the url:

test.elitewildlife.com

Here is the CSS:

.twitter_badge { 
   position: absolute;
   right: 0px;
}

tomrogers123

The demo wouldn't load for me but my gut instinct is: do you have position: relative on the parent container of .twitter_badge? If you get the demo loading, I'll investigate in more depth.

mcjohnst

Make sure the parent element or containing div has position: relative on it. Chris, of course, has a helpful screencast over some of the issues you can run into with positioning here.

Paulie_D

Link doesn't work for me either.

I would also say that using position:absolute is 'generally' something that should only be used as a last resort.

There are MUCH better ways of laying out your pages.

Joe_Temp

sorry... it's test.elitewildlife.com

Joe_Temp

I know that the parent should be relative but I have a div inside a div inside a div inside a div. I've got generations of divs so to speak.

Which one should be relative? The great granddaddy?

Paulie_D

Ok...if you set position:absolute will take the element out of the document flow.

If you try removing both of the properties and see what happens.

.twitter_badge { 
   position: absolute; /* takes document of of flow */
   right: 0px; /* shoves it far over to the right.
}

I guess the question is...where is it supposed to be?

Are you aware of floats and how they work....that's probably the best way to go.

As I said...

using position:absolute is 'generally' something that should only be used as a last resort.

Joe_Temp

Ok. Let me play around with floats, even though I've never had much luck.

I'm going to go back to basics here and see what happens. I'll post an update when I'm through.

Sorry to wast anyone's time.

Paulie_D

Not a waste...It's just that we don't know where the twitter bits are supposed to be.

I'm guessing that they are supposed to be under the elements on the right...right?

Joe_Temp

The twitter badge is supposed to be directly below the email form on the right.

Update: I tried to float it right and the same thing happens. It jumps out of the wrapper div.

I've even gone through my HTML to make sure that I'm not missing a /div close tag or something stupid like that.

Relative vs. Absolute aside, for some reason absolute positioning worked on the email form... but not the twitter badge.

I'm really at a loss for what is going on here.

tomrogers123

The problem is #mail need to be position: relative to set a context for the absolute positioning within. You can't do this though because the container itself is set as absolute and so changing it would screw the whole thing up.

tomrogers123

It'll take some time but try to figure something out for you.

Joe_Temp

Yeah, it's test.elitewildlife.com. That should work. First url posted was wrong.

wolfcry911

can't connect to that url either...

tomrogers123

Down again for me too.

Paulie_D

Guess it's offline for a while.

I'm going to go back to basics here and see what happens.

I think we'll let this one lie for a while.

He can always post back once he's re-evaluated.

Joe_Temp

Ok guys, This is driving me nuts. I've been researching this for hours and can't figure it out.

Click here

The test site should be back up. You will see that my twitter badge is not directly under the mail form like it should be... it's to the right. When I float other divs, they work perfectly fine.

Here is the CSS controlling all this:

.twitter_badge { 
  float: right;
  margin-top: 10px; 

}

#bird_box { 
    width: 80px; 
    height: 80px; 
    background: url(twitter_noise.png); 
    position: absolute;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    outline: 1px dashed #00CCCC;
    outline-offset: -5px;

} 

#caged_bird {
    position: absolute;
    top:4px;
    left: 6px;
    shadow: 0px 1px 2px #33CCCC;
}

#talk_bubble { 
    width: 345px; 
    height: 80px; 
    background: url(twitter_noise.png); 
    position: absolute;
  margin-left: 90px;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    outline: 1px dashed #00CCCC;
    outline-offset: -5px;

} 


#tweet {
    position: absolute;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    font-family: league_gothic;
    text-align: justify;
    color: #006363;
    text-shadow: 0px 1px 2px #33CCCC;
    font-size: 20px;
}

If someone could please solve this... it would make my month.

wolfcry911

a quick fix: remove the float and add position: absolute; and right: 0; to .twitter_badge then remove position: absolute from #talk_bubble and #bird_box, and add float: left to #bird_box

That will solve the problem, but I'd stronger recommend redoing the entire layout

Joe_Temp

What do you mean when you say:

but I'd stronger recommend redoing the entire layout

?

Paulie_D

Because using absolute positioning should IMO be reserved for specific effects not general layout and, as I said, should be your last option...not your default.

Floats is the way to go here. You just need to get your head around how they work and how to overcome their minor quirks.

As you have discovered, maintaining and adding to a site built using AP is a complete minefield.

Rohit_css

.twitter_badge { float: none; margin-left: 525px; margin-top: 10px; }try this it worked...!!!

vipinisvest01

Hi this some css add #bird_box{float:left; position: relative;} and this id add #talk_bubble{ position: relative;}

this is right way;

Joe_Temp

Thanks all!!!

treehouse : what would you like to learn today?

Forums

[Solved] Why is this div jumping outside the wrapper?