Welcome to WebmasterWorld Guest from 34.204.36.101

Forum Moderators: not2easy

Message Too Old, No Replies

clear:both problem

     
12:58 am on Nov 9, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 31, 2002
posts:73
votes: 0


I have 2 containers... the first container holds a 2 column standard layout.

The second container holds a 4 column div row which is between the header and the 2 column content.

The 4 column div is placing itself below the header's fine, however the 2 column content part is sliding itself underneath the 4 div rows.

I tried a div style "clear:both" in the html code and tried a clear:both in the CSS itself, but the 2 column content wont drop down from the second containers 4 rows.

HTML CODE
<!-- HEADER IMAGES -->
<div class="header"><div class="tophead"></div>
<div class="tophead1"><br></div>

<!-- 4 COL DIV COL CONTAINER -->

<div id="wrapper1">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>

<!-- MAIN 2 COL CONTAINER -->

<div id="wrapper">
<div id="contenta">
<div align="center">
<hr width="440">
</div>
<div class="content"> <!-- #BeginEditable "mainbody" -->{mainbody} <!-- #EndEditable --></div>
</div> </div>

<!-- MENU -->

<div id="nav"></div>

<!-- FOOTER -->

<div class="footer">
<div align="center">

THE CSS
#wrapper1 {
width:100%;
float:left;
}

#one {
position: absolute;
left:0%;
}

#two {
position: absolute;
}

#three {
position: absolute;

}

#four {
position: absolute;
}

#contenta { clear:both;
margin-right:300px;
padding-bottom: 20px;
border-top: 1px solid; /* to stop collapsing margins in Moz */
}

#nav { clear:both;
width: 290px;
float: right;
}

#wrapper {
width:100%;
float:left;
margin-right:-305px;
}

.footer, .header {
border-top: 1px solid ;
border-bottom: 0px solid ;
margin: 0;
clear:both;
width: 100%; /*ie requires this or height */
}

The idea is to replace an existing 4 column table which is currently holding content between the header and main content. The table is cleared from the header using clear:both but in the case of the replacement 4 col div row it clears the header, but anything below that 4 col div row slides under it. The current 4 column table hold latest updates and some images, directly below that that 2 column content starts.

<Please, do not direct people to your site.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 1:38 am (utc) on Nov. 9, 2005]

12:16 pm on Nov 9, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


anything below that 4 col div row slides under it

Although the #wrapper1 div is floated, and would therefor be cleared by the clear property set on #wrapper, the content of the #wrapper1 div is positioned absolutely. This means that it is removed from the document flow and unable to interact with anything else on the page, including it's parent container. In effect, having all those numbered divs set to position:absolute makes the #wrapper1 div think that it has no content at all. Therefor it snaps shut, and when the #wrapper div clears it, it ends up sitting beneath the content.

I'm assuming there's some code that you snipped out of your example: some positioning properties - probably a left property value to move them across the screen? - that went with the absolute position property? If so, you could still use positioning in this way, just switch from absolute to relative. This would reserve room in the layout for the element, causing #wrapper1's height to match that of the tallest div inside it and forcing #wrapper down below it.

Alternately, you could left float all thos numbered boxes and have the same effect.

Either way, the key is to make the content able to influence the height of #wrapper1.

cEM

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members