CSS: Float-clearing, getting containers to honor the height of floated elements inside of them

Filed Under (General) by Wenbert on 15-10-2007

Tagged Under :

I accidentally stumbled on this article found at Agile AJAX. It talks about float-clearing, getting containers to honor the height of floated elements inside of them.

Here is a sample CSS code:

  1.  
  2.     /* float clearing for IE6 */
  3.     * html #container,
  4.     * html .classThatNeedsToBeCleared,
  5.     * html div.anotherClassThatNeedsToBeCleared,
  6.     * html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
  7.       height: 1%;
  8.       overflow: visible;
  9.     }
  10.  
  11.     /* float clearing for IE7 */
  12.     *+html #container,
  13.     *+html .classThatNeedsToBeCleared,
  14.     *+html div.anotherClassThatNeedsToBeCleared,
  15.     *+html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
  16.       min-height: 1%;
  17.     }
  18.  
  19.     /* float clearing for everyone else */
  20.     #container:after,
  21.     .classThatNeedsToBeCleared:after,
  22.     div.anotherClassThatNeedsToBeCleared:after,
  23.     #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared:after{
  24.       clear: both;
  25.       content: ".";
  26.       display: block;
  27.       height: 0;
  28.       visibility: hidden;
  29.     }
  30.  
  31. <div id="container">
  32.     < div id="rail" style="float: left;">
  33.     < div id="content" style="float: left;">
  34. </div>

Click here for the entire post.

Read More

Leave a Reply
Subscribe to Rss Feed : Rss