Clearing floats
Here's a common problem - a parent div doesn't wrap itself around floated elements.
When elements are floated, they are taken out of the natural flow of the document. Other elements are supposed to
flow around them. This is very useful for things like adding a picture to some text, like here. This image is embedded in this paragraph and floated right.
If a container div only has two floated elements, we're left with no actual content in the flow, so the borders of the container collapse in on itself and we get a thick line like this :
float : left
float : right
The problem usually looks more like this though :
Image here
overflow:auto
This can sometimes be fixed by simply adding 'overflow:auto' to the parent div. This works for Firefox, but maybe not in IE...(I'd test it out - if it works, then it's good - very quick and easy).
float : left
float : right
There are other ways to fix this problem that add content...
A clearing div
If we insert a div just before the closing tag of the container div with 'clear:both' it will make sure there's nothing to its left or right and so place itself below the floated elements.
This div also needs some height due to a strange thing in IE called 'haslayout'. If a div has no height (and no content) it is ignored. So, the clearing div has 'height:1px'. Setting 'margin-top:-1px" will counteract that.
The overflow : hidden is for IE because it won't render an element less than the current font-size/line-height. Setting overflow : hidden reduces the height to 1px as per other browsers and therefore does not interfere with anything else.
(Paul O'Brien - the man who knows these things).
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
Just before the closing tag of the parent div. :<div class="clear"></div>
:after + content {}
Here's another way of clearing divs. This was written by Tony Aslett and modified by the people at P.I.E.. This applies the float clearing to the parent div by adding content using :after. IE (being a bit stupid) doesn't know about this, but that's OK, because it contains the child elements anyway.
The good thing about this method is that there are no empty divs - just a class name.
float : left
float : right
Float the parents
One more way to do this is by floating the parent div. If you want the div to be 100%-width, this will work well - otherwise, you may have problems with this as you may not actually want the div to float left. The point is that a floated parent will contain floated children.
CSS
#floats div.wrapper {
border:1px solid #666666;
background-color:white;
position:relative;
}
#floats div.div1, #floats div.div2 {
width:200px; height:100px;
}
#floats div.div1 {
border:1px solid red; float:left;
}
#floats div.div2 {
border:1px solid blue; float:right;
}
#floats div#overflow {
overflow:auto;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
.cfix:after {
content: ".";
display: block;
height: 0;
overflow:hidden;
clear: both;
visibility: hidden;
}
.cfix {display: inline-table;}
/* Hides from IE-mac \*/
.cfix {height:1px;}
/* End hide from IE-mac */
HTML
<div id="floats" class="cfix">
<h1>Clearing floats</h1>
<p>Here's a common problem - a parent div doesn't wrap itself around
floated elements.</p>
<p><img class="fright" src="wine.jpg" width="50" height="50" alt="wine" />When elements are floated, they are taken out of the natural flow of the document. Other elements are supposed to
flow around them. This is very useful for things like adding a picture to some text, like here. This image is embedded in this paragraph and floated right.</p>
<p>If a container div only has two floated elements, we're left with no actual content in the flow, so the borders
of the container collapse in on itself and we get a thick line like this :</p>
<div class="wrapper">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
</div>
<div class="clear"></div>
<p>The problem usually looks more like this though :</p>
<div class="wrapper">
<div class="div1">
<p>Image here</p>
</div>
People expect a box to wrap itself around a picture, but it doesn't...
</div>
<div class="clear"></div>
<h3>overflow:auto</h3>
<p>This can sometimes be fixed by simply adding 'overflow:auto' to the parent div. This works for Firefox, but maybe not in IE...(I'd test it out - if it works, then it's good - very quick and easy).</p>
<div id="overflow" class="wrapper">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
overflow:auto;
</div>
<p>There are other ways to fix this problem that add content...</p>
<h3>A clearing div</h3>
<p> If we insert a div just before the closing tag of the
container div with 'clear:both' it will make sure there's nothing to its left or right and so place itself below
the floated elements.</p>
<p>This div also needs some height due to a strange thing in IE called 'haslayout'. If a div has no height (and no content)
it is ignored. So, the clearing div has 'height:1px'. Setting 'margin-top:-1px" will counteract that.</p>
<div id="paulquote">
<q>
The overflow : hidden is for IE because it won't render an element less than the current font-size/line-height.
Setting overflow : hidden reduces the height to 1px as per other browsers and therefore does not interfere with anything else.</q>
<p><i>(<a href="http://pmob.co.uk/">Paul O'Brien</a> - the man who knows these things).</i></p>
</div>
<div class="wrapper">
<div class="div1">
.clear {<br />
clear:both;<br />
margin-top:-1px;<br />
height:1px;<br />
overflow:hidden;<br />
}
</div>
<div class="div2">
<p>Just before the closing tag of the parent div. :<div class="clear"></div></p>
</div>
<div class="clear"></div>
</div>
<h3>:after + content {}</h3>
<p>Here's another way of clearing divs. This was written by
<a href="http://www.csscreator.com/attributes/containedfloat.php">Tony Aslett</a>
and modified by the people at <a href="http://www.positioniseverything.net/easyclearing.html">P.I.E.</a>. This applies the float clearing to the parent div
by adding content using <strong>:after</strong>. IE (being a bit stupid)
doesn't know about this, but that's OK, because it contains the child elements anyway.</p>
<p>The good thing about this method is that there are no empty divs - just a class name.</p>
<div class="wrapper cfix">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
</div>
<div id="float-float">
<h3>Float the parents</h3>
<p>One more way to do this is by floating the parent div. If you want the div to be 100%-width, this will work well - otherwise, you may have problems with this as you may not actually want the div to float left. The point is that a floated parent will contain floated children.</p>
</div>
</div>
Comments
#1 #2Thanx lot...
clear explaination......
Brilliant! Thank you so much!
Thanks, that is what I have been searching for 1 hour...
I've finally found a normal presentation on this issue. Thank you.
Only clear solutions with explanations I found. Thank you.
pay to do my paper <a href="https://papermethodist.com/ ">research writing services</a> online letter writing help
lasix renogram procedure <a href="https://lasixona.com/ ">lasix drug test</a> thiazide vs furosemide calcium
Thanx it's too useful
.
especially the overflow option!. it explains lots of things