Hello, please sign in or register
You are here: Home

Easy clear CSS floats right and left

Problem

Floating nested divs may popout outside of the element they are contained within, this is not a browser bug. And is so for wrapping text around images and quotes and other elements, like a newspaper. However more often i'd like it nested div's to appear completely contained within its parent div. Example

This is bad... 
Float:left;
Float:Right;
Word



This is good... 
Float:left;
Float:Right;
Word

Solution

There are two solutions to this problem and both utilise the clear:both; CSS function

The first requires the user to add markup to the page, contained with the parent div but after all the other child elements. e.g...

<div>  
<div style='float:left;'>Float:left;</div>
<div style='float:right;'>Float:Right;</div>
Word
<div style='clear:both;'> </div>
</div>
The second method is written in CSS attributes and without having to add markups on the page


/************************   
 * clear both :: Hacks
 * http://www.positioniseverything.net/easyclearing.html
 ************************/
.my_class:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* Hides from IE-mac */
* html .my_class {height: 1%;}
/* End hide from IE-mac */

Comments

Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share