How can I create a box big enough to contain whatever content I put in it?

Question

Here is a link to my problematic page:

http://www.studioteknik.com/lamouvance/programmation.php

I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...

Please, help! I'm sure it a one line solution... Thanks in advance!

• Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !

---

I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?

Answer 1

I think I see the issue, try:

.content {
    overflow: auto;
}

Answer 2

If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:

<div class="clear"></div>

With this CSS:

.clear {
  height: 0;
  clear: both;
}

Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)