hi to all
How to center my float div inside the parent div, and why in ie6 min width works but sometime different behavior. If I was trying to resize the window it was broken (second table move to bottom) and the horizontal scroll bar doesn’t appear.
thanks in advance
jhun
here is the code
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/css.css" type="text/css">
<style type="text/css">
body{
margin:0;
padding:100px 0 0 150px;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:100px;
background:lime none repeat scroll 0 0;
}
div#left-sidebar{
position:absolute;
top:100px;
left:0;
width:150px;
height:100%;
background:yellow none repeat scroll 0 0;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
width: 100%;
overflow:auto;
}
#wrapper{
min-width:1000px;
width:[removed]document.body.clientWidth < 1002? "1000px": "auto" );
}
</style>
</head>
<body>
<div id="header"> header </div>
<div id="left-sidebar"> left-sidebar </div>
<div id="content">
<div id="formdiv">
<div id="wrapper" style="border: 1px solid #00CCCC" align="center">
<div style="width:46%;float:left">
<div style="margin:auto">
<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<div style="padding:20px">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><label>
<select name="select" id="select">
</select>
</label></th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div></div></div></div></div></div></div></div>
</div>
</div>
<div style="width:46%;float:left">
<div style="margin:auto">
<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<div style="padding:20px">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div></div></div></div></div></div></div></div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>