I am trying to create a liquid 3 column area within a list item. To achieve this, I use the standard method of having 3 elements, of which the first two are the sides, floated left and right, and the 3rd is the content, which should sit between the two. The following HTML works fine in Firefox, but doesn’t render correctly in IE7 – the content is rendered below the two floated elements. Any ideas what the problem is?
<html xmlns='http://www.w3.org/1999/xhtml'> <head> <style> * { margin: 0; padding: 0; border: 0; } span { display:block; } .corner { width: 12px; height: 12px; } .tl { float: left; } .tr { float: right; } .fill { margin: 0px 12px; } </style> </head> <body> <ul> <li> <span class='tl corner'>a</span> <span class='tr corner'>b</span> <span class='fill'>text text text</span> </li> </ul> </body> </html> Note that replacing the spans with divs results in the same effect. I’ve also tried various DocTypes with no luck. And it works fine outside of the list, hence the problem appears to be intrinsic to using the list.
The answer is to wrap the spans in a block level element (say, a div), with overflow set to hidden. Example came from a more in depth look at the 2nd CSSplay example.