homepage Welcome to WebmasterWorld Guest from 54.161.228.29
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Float divs still overlapping in IE (even with clear:both)
robinsonirwin




msg:3418965
 3:48 pm on Aug 10, 2007 (gmt 0)

So,
I've been finding plenty of posts that recommend using the "clear:both" definition in the containers I have that hold my Float DIVS. But for some reason, it's still not fixing my overlap problem in IE. It works fine in everything else. The float divs disappear behind my footer.

I have a centered Wrapper. In that wrapper, I have a container called "maincontent" and inside maincontent" I have four floating divs (2 left, 2 right).

The reason I have Wrapper and Maincontent is because I have two separate backgrounds going on.
Does anyone have a quick fix for the overlap issue?

Below is html:
<div id="wrapper">
<div id="MainContent">
<div id="stageheader_left">
<p>content content content</p>
</div>
<div id="stagecontainer_right">
<p>content content content</p>
</div>
<div id="stageslideshow_right">
<img src="blahblah.jpg" />
</div>
<div id="emptydiv">&nbsp;</div>
</div>
<div id="emptydiv">&nbsp;</div>
<div id="Footer">
<p>copyright 2007</p>
</div>
</div>

----and here's my css:----
#wrapper{
position: relative;
clear:both;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: auto;
width: 830px;
background-image:url('backgroundrepeat.jpg');
background-repeat:repeat-y;
text-align: center;
}

#emptydiv {
clear: both;
}

#stageheader_left {
float: left;
margin-top: 80px;
margin-left: 55px;
padding-left: 0px;
padding-right: 0px;
background: #d9d9d9;
width: 416px;
}
#stagecontainer_left {
float: left;
margin-top: 10px;
margin-left: 55px;
padding-left: 15px;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
background: #d9d9d9;
border: solid #8a8a8a 1px;
width: 414px;
text-align: left;
}
#stagecontainer_right {
float: right;
margin-top: 10px;
padding-top: 3px;
padding-bottom: 8px;
margin-right: 55px;
margin-left: 0px;
padding-left: 15px;
padding-right: 15px;
background: #d9d9d9;
border: solid #8a8a8a 1px;
width: 224px;
text-align: left;
}
#stageslideshow_right {
float: right;
margin-top: 10px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 55px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: transparent;
width: 256px;
}

#MainContent{
padding-top: 70px;
width: 830px;
height: 577px;
margin-bottom: 20px;
padding-bottom: 10px;
background-image:url('topcontentbg.jpg');
background-repeat: no-repeat;
padding-bottom: 0px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #0000000;
}

#Footer{
clear: both;
width: 830px;
font-family:Arial, Helvetica, sans-serif;
background-image:url('footerbg_high.jpg');
background-repeat: no-repeat;
color: #8a8a8a;
font-size: 11px;
line-height: 14px;
padding-bottom: 0px;
padding-top: 8px;
margin-bottom: 0px;
height: 281px;
background-color: #8a8a8a;
}

Any help is much appreciated. You all are awesome!

 

SixTimesEight




msg:3419726
 5:48 pm on Aug 11, 2007 (gmt 0)

Are you declaring a doctype? Which browsers are you seeing problems in?

I threw together a test page with what you provided and it worked fine for me in FF and IE7.

I would however recommend that instead of floating your divs in separate directions, float them all left and just order them in the html so that they fall into place properly.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved