Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="URL" />
<style type="text/css">
.clear {clear:both;}
#container {width:80%;background-color:#4e5869;margin:0 auto;}
#sub_container1 {float:left;width:78%;}
#right {float:left;width:22%;background-color:#93a5c4;height:300px;}
#header {background-color:#6f7d94;}
#header h1 {padding:0;margin:0;}
#menu {width:25%;float:left;background-color:#8090ab;height:300px;}
#miniinfo {width:25%;float:left;background-color:#93a5c4;height:400px;}
#middle {width:50%;float:left;background-color:#0000ff;height:600px;}
#footer {height:50px;background-color:#ff3333;}
</style>
</head>
</__body>
<div id="container">
<div id="sub_container1">
<div id="header">
<h1>Header</h1>
</div>
<div id="menu"></div>
<div id="miniinfo"></div>
<div id="middle"></div>
<div class="clear"></div>
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer"></div>
</div>
<__body>
</__html>
@spcherub actually i was fooling around with this to, used same structure as you, but if you take a closer look you will see small 1px gap between #middle and #right and also between #right and #container.spcherub wrote: @frankmani - I was able to lay this out a little differently (same end result, different div hierarchy) that did not trigger the Webkit bug. (I used static heights to do a quick mockup)
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <__html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Blank</title> <link rel="stylesheet" type="text/css" href="URL" /> <style type="text/css"> .clear {clear:both;} #container {width:80%;background-color:#4e5869;margin:0 auto;} #sub_container1 {float:left;width:78%;} #right {float:left;width:22%;background-color:#93a5c4;height:300px;} #header {background-color:#6f7d94;} #header h1 {padding:0;margin:0;} #menu {width:25%;float:left;background-color:#8090ab;height:300px;} #miniinfo {width:25%;float:left;background-color:#93a5c4;height:400px;} #middle {width:50%;float:left;background-color:#0000ff;height:600px;} #footer {height:50px;background-color:#ff3333;} </style> </head> </__body> <div id="container"> <div id="sub_container1"> <div id="header"> <h1>Header</h1> </div> <div id="menu"></div> <div id="miniinfo"></div> <div id="middle"></div> <div class="clear"></div> </div> <div id="right"> </div> <div class="clear"></div> <div id="footer"></div> </div> <__body> </__html>
