Previous Message
Next Message

Problem with floated items and clears

Sent by Els on 17 March 2006 10:10

Michel Bozgounov wrote:


> What's the best way to do it, now that I know the problem? ;-)
> 1) {zoom: 1} works pretty well, it only does not validate. But
> still works, which is good:)
> 2) I tried
> - the method {display: inline-block} but it works in IE and FF
> only, Opera reacts to it and the whole page messes up.
> 3) Third option is, I guess, to give widths to all of the
> elements on the page (if it is possible) - and probably "show"
> them only to IE 6/5.5/5 because other browsers doesn't have
> this problem...
> I will go probably the Option No.3 way.
> I was just curious, how you handle such situations? :-)

Well :-)
a) I don't care that zoom:1 doesn't validate.
b) I never used or had to use zoom:1 until IE7beta appeared. The 
Holly hack worked just fine.

> In some cases, it's not difficult to add certain fixed width
> to an element, to make IE happy. But in cases that we would
> like the width to be auto-calculated?...

I don't know how complex your page is, but I've tackled that for 
a simple 3-col layout, where I wanted the middle column to both 
float and be flexible width.

I made a 3 layer div:
<div id="content">
  <div id="content-float">
    <div id="content-inner">
foo bar bla bla

I set div#content to have no particular width, just margins for 
the sidebars, then I set div#content-float to float:left and 
width:100%; and div#content-inner was used to add paddings. 
(Can't add padding to 100% width or layout will screw up).
I did need a bit of hacking to make IE5 (quirksmode box model) 
understand, but it works nicely.

The code as used for my site:
(only 2 cols but 3 cols would be the same, only with added 
margin-left on #content)

width:100%; /* needed for IE5, else the 100% width on the 
content-float screws up */
w\idth:auto; /* for IE6, must not be seen by IE5 */
float:left; /* floated left so that there is no real need for a 
width value (except for IE6 :-( ) */
padding:10px 10px 20px 10px;
border-top:1px solid rgb(255,255,255); /* border to make IE5 
behave */



css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Possibly related: