homepage Welcome to WebmasterWorld Guest from 54.196.198.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Clearing floats within a float
whatson




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

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?

 

Paul_o_b




msg:4512308
 4:04 pm on Oct 25, 2012 (gmt 0)

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...]

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved