Floated div with liquid widt problem in Opera/Safari [Archive]

diconn

11-28-2010, 03:09 PM

I have a problem with floated divs in Opera/Safari

<body style="width:98%; padding:0 1%; margin:auto;">
<div style="width:75%; float:left; background:red; height:40px;"></div>
<div style="width:25%; float:left; background:green; height:40px;"></div>
<div style="clear:both"></div>
<div style="width:100%; background: blue; height:40px;"></div>
</body>

If you open this in FF and IE everything looks fine.
In Opera and Safari I have these 2 floated divs width 1px short against this blue. If you change browser window (by stretching in a window mode) you'll see this width is briefing 1px. Any idea about that?

diconn

11-29-2010, 04:22 AM

This is one more issue with Opera/Safari. Opera doesn't understand width property expressed by partial value. It is rendering width as 33%. So for

Opera 33.333% +33.333% +33.333% = 99% (width 1% short)
Safari 33.333% +33.333% +33.333% = 99.9% (1px short, but I think 0.1%)
IE, FF 33.333% +33.333% +33.333% = 99.999%(everything fine here)

<body style="width:98%; padding:0 1%; margin:auto;">
<div style="width:33.333%; float:left; background:red; height:40px;"></div>
<div style="width:33.333%; float:left; background:green; height:40px;"></div>
<div style="width:33.333%; float:left; background:grey; height:40px;"></div>
<div style="clear:both"></div>
<div style="width:100%; background: blue; height:40px;"></div>

Looks like such DIV floating doesn't work for Safari/Opera if you want slice/dice webpage with liquid design.
Demo can be seen here (http://mediabox.kz/pixelissue.html).