Welcome to WebmasterWorld Guest from 54.167.185.18

Forum Moderators: not2easy

Message Too Old, No Replies

Clearing floats within a float

   
8:13 pm on Oct 24, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



e.g.

#side-nav #image{
float: left;
}

<div id=side-nav>
-home
-about
</nav>

<div id=body>
<div id=image></div>
<div id=content></div>
<div style="clear:both"
<div id=more-content></div>
</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?
4:04 pm on Oct 25, 2012 (gmt 0)

10+ Year Member



Hi,

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:

float
absolute positiioning
overflow(other than visible)
display:inline-block
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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.float {
float:left;
width:200px;
height:200px;
background:red;
margin:10px;
}
.content { margin:0 0 0 220px; }
.inner {
width:100%;
float:left;/* remove this to see what would happen without the parent being floated*/
}
.cleartest { clear:both }
</style>
</head>

<body>
<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>
</div>
</div>
</body>
</html>




More info on "Block formatting context here"
[w3.org...]