Getting DIVS to Expand Vertically

One of the basic things about developing CSS Layouts that needs to be understood is that parent elements, by default in FireFox do not expand vertically with their “floated children”. The same is true in IE6 and 7 if the container doesn’t have a width set on it. For example if you have a containing <div> that you want to use to encapsulate a static, 3 column, floated layout, that containing <div> will expand vertically only as far as it finds inline elements. Conceptually, given the “rules” of the <div> element this makes sense but it definitely creates an annoyance from time to time.

The problem visualized:

There are basically 3 ways to get divs to expand with their floated children:

1. “Clear the floats”

   Probably the most common way to go about getting container <div>’s to expand with floated child elements is to place a “clearing element” with the css property: “clear:both” after the floated elements within the containing <div>. This method works great, but there are some situations where the clearing elements end up needing to be an empty <div>, or I have seen the <br> tag used before… Personally, I don’t really like using blank elements for the sake of getting layouts to work properly. Also, top margins do not work on “cleared” elements in IE7 and FireFox.

   Container
   

   Float:left

   Float:right

   clear element
   (clear:both, margin-top:10px;)

2. Float the containing <div>

   The easiest way to go about getting <div>’s to expand vertically with their floated children is to float the containing <div> with a specified width. This method works great for static layouts but there are some slight drawbacks with the nature of the “float” property that stem from the need to specify widths on floated elements. Sometimes things get messy further down the hierarchy. In addition, if you want to center a floated <div>, an extra <div> is needed. Once again, Personally, I like to be as efficient as possible with <div> usage.

   Container (float:left, width:230px;)
   

   Float:left

   Float:right

3. Overflow:hidden; Height:1%;

   So what if you want a liquid width and don’t want to use extra elements to achieve “vertical containment” around your floated elements? Use the properties: overflow:hidden and height 1%;.

   This method doesn’t have to be used often but it has it’s advantages. It basically acts the exact same way as setting the CSS properties: float:left; width 100%; BUT the advantage is that you don’t have to set any widths. I have found this technique to be very useful in liquid layouts where I need some padding on a container element. I also use this technique when standardizing pieces of code for use in multiple web sites. I design a lot of e-commerce sites, and depending on the site, modules have to be placed in areas of varying widths depending on the site design, so in order to make the the code standard across the board without having to set widths every time, the module needs to be liquid.

   This method basically makes the container element think that their is a height set on it so it acts just like floating the container… but with no widths! The overflow:hidden takes care of the FireFox end of the solution while the height:1%; takes care of IE. An important thing to note about this method is that a height cannot be set on the container of the element of the you place overflow:hidden, height:1%; in or, well, obviously it will make the height of the div 1% of the container.

   Container (overflow:hidden; height:1%)
   

   Float:left

   Float:right