Why is this div jumping outside the wrapper?

[nixnerd]

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

[Click here](http://test.elitewildlife.com/ “Test Website”)

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

[nixnerd]

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…!!!

[Bipin Kumar Pal]

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

this is right way;

[nixnerd]

Thanks all!!!

[Author]

Posts