Previous Message
Next Message

Problem with floated items and clears

Sent by Els on 17 March 2006 10:10


Michel Bozgounov wrote:


[snip]

> 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 http://www.brunildo.org/test/InlineBlockLayout.html
> - 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
    </div>
  </div>
</div>

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 LocusMeus.com site:
(only 2 cols but 3 cols would be the same, only with added 
margin-left on #content)

#content{
background-color:rgb(255,255,255);
padding:0;
margin-bottom:0px;
margin-right:8.5em;
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 */
}
#content-float{
float:left; /* floated left so that there is no real need for a 
width value (except for IE6 :-( ) */
width:100%;
}
#content-inner{
padding:10px 10px 20px 10px;
border-top:1px solid rgb(255,255,255); /* border to make IE5 
behave */
}

HTH

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: