Float problems

Not working in Opera

[Ryan8720]

I have three divs that I want to float side by side in a row. I have it working perfectly in IE6, IE5.5, and Firefox. But in Opera 7.11 (haven't tried other versions of Opera) the divs are below each other.

Here is the relevant code:

#logo {
background: transparent;
border: 0;
float: left;
margin: 0 0 20px 0;
padding: 0;
}
#logo .lilbox {
border: 1px solid #bac9d8;
color: #bac9d8;
float: left;
margin: 0 8px 0 8px;
padding: 0;
width: 140px;
}
#logo strong {
background: #bac9d8;
border-bottom: 3px double #bac9d8;
color: #0f325e;
display: block;
font: bold 17px "Palatino Linotype", "Book Antiqua", "Times New Roman", Palatino, serif;
height: 25px;
margin: 0;
padding: 0;
text-align: center;
width: 100%
}
<div id="logo">
 
 <div class="lilbox">
 <strong>Title 1</strong>
 <ul>
 <li>info</li>
 <li>info</li>
 <li>info</li>
 </ul>
 </div>
 <div class="lilbox">
 <strong>Title 2</strong>
 <ul>
 <li>info</li>
 <li>info</li>
 <li>info</li>
 </ul>
 </div>
 <div class="lilbox">
 <strong>Title 3</strong>
 <ul>
 <li>info</li>
 <li>info</li>
 <li>info</li>
 </ul>
 </div>
</div>

[Rambo Tribble]

Your logo div doesn't have a width specified, which is required for floats.

[createErrorMsg]

Why is #logo floated at all? It looks like #logo is your containing box for the other three floated items and as such doesn't require floating itself.

Floats without specified widths often shrink to fit their widest element, in this case ONE of your .lilbox divs, forcing them to stack vertically.

Either specify a width for #logo (as Rambo said), or drop the float:left from it. Either one should fix you.

[Ryan8720]

Well that was simple. Thanks.

[SuzyUK]

Why is #logo floated at all? It looks like #logo is your containing box for the other three floated items and as such doesn't require floating itself.

Floating the containing block/element will serve to make it stretch to contain its floated children as per recs.. IE does it by accident, this is a very simple way to make compliant browsers act the same..

however yes width on floats are still required, the new behaviour (Opera is preceding the crowd) is that floats without width will "shrinkwrap" elements, which may well also be a desirable function, but imo is unusable yet due to backwards compatibility (especially IE/Mac). therefore if you wish to use this float in a float behaviour, set width: 100%; on the containing float.

Suzy