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

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

CSS Forum

Clearing floats within a float

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4511914 posted 8:13 pm on Oct 24, 2012 (gmt 0)


#side-nav #image{
float: left;

<div id=side-nav>

<div id=body>
<div id=image></div>
<div id=content></div>
<div style="clear:both"
<div id=more-content></div>

So the issue is that when I clear the float within body, the more-content section will then be placed under the side-nav, as it is clearing all the floats, and I just wanted to clear the image float within the body.

How do I do that?



10+ Year Member

Msg#: 4511914 posted 4:04 pm on Oct 25, 2012 (gmt 0)


When you clear a float you clear all floats that are above in the html no matter where they are. Unless......

The parent element that holds the clearing element is creating a new "block formatting context" and then it will contain the clearing of any floats within that parent element and not affect elements outside. (Elements that create a block formatting context will also automatically contain child floats which is why overflow:hidden is often used to this effect).

Elements that create "New block formatting contexts" are those with the following properties:

absolute positiioning
overflow(other than visible)
display:table /table-cell (and other table constructs)

Therefore if you want to contain any clear:both etc in a parent div the parent div will either need to be a float itself or indeed any one of the other properties I mentioned above. If you use a float then you may find it awkward in a fluid environment as widthless floats always try to be 100% wide. (Of course I don't now the dynamics of your layout so I can't say which method is best.)

If you don't need visible:overflow you could simply add overflow:hidden to the parent (and zoom:1.0 for ie7 and under as they don't quite understand it but create the same effect when in haslayout mode which the zoom triggers.

Note that elements that create block formatting contexts will not wrap around the float but for a rectangular block to the side.

I assume that you wanted a floated element with a new block to the side of it. If so and if you need visible overflow you will need an extra element and do it like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.float {
.content { margin:0 0 0 220px; }
.inner {
float:left;/* remove this to see what would happen without the parent being floated*/
.cleartest { clear:both }

<div class="float">Float</div>
<div class="content">
<div class="inner">
<p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p>
<div class="cleartest">Clear Test</div>

More info on "Block formatting context here"

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