HTML div box not containing floating elements

Today I was doing some web design for one of my clients and I came across a frustrating problem. I wanted to provide a white background for a block of floating text. I setup a div container outside the text with a background colour set to white but the div container didn't contain the text. It appeared to have zero height. I could set the height manually in pixels but I needed the div to expand automatically to contain it's child elements.

Eventually after a bit of searching I found that a div will not automatically contain floating elements. To force it to do this you have to include the following code in your CSS file:

  1. .div-class { overflow: auto; }

Hope this saves someone some frustration!

Tweet: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.