margin-left: 50%;
pickle, is there any reason you used margin-left instead of "left"? (I just wanna double check if I am missing something)
Okay I tried 3 different methods,
Table method seemed to work flawlessly across IE6 and modern browsers, Div with display:table didn't work for me on IE6 and 7.
Lastly the Absolutely positioned DIV method seemed to work fine in IE6/7 plus modern browsers, the only problem I found was when the user zoomed in/out in IE 6/7/8 Safari and Chrome it broke the layout some. (but I can't say that with certainty as I think I zoom is yet not flawless?) Also it had the best behavior when the window was resized, meaning the absolute positioned background did not force a scrollbar but the content did when it was hidden past the minimum width.
Code: Select all
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px Arial,Helvetica,sans-serif;
cursor:default;
text-align:center; /* IE */
height:100%;
width:100%;
}
/* table method */
.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
text-align:left;
}
.table-container .left{
background:transparent;
}
.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}
.table-container .center div{
margin:0 auto;
width:960px;
}
.table-container .right{
width:auto;
background:#ccc;
}
/* div method */
.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
text-align:left;
}
.div-container .left{
display:table-cell;
background:transparent;
}
.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}
.div-container .center div{
display:table-cell;
margin:0 auto;
width:960px;
}
.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}
/* div method (absolute positioning) */
.div-abs-container{
position:static;
margin:auto;
margin-top:16px;
width:960px;
height:100px;
text-align:left;
}
.div-abs-container .inner{
position:relative;
z-index:1;
width:960px;
height:100px;
background:#ddd;
text-align:left;
}
.div-abs-background{
position:absolute;
top:256px;
right:0;
z-index:0;
width:50%;
height:100px;
background:#ccc;
}
</style>
</head>
<body>
<table class="table-container">
<tr>
<td class="left"> </td>
<td class="center"><div>Table method</div></td>
<td class="right"> </td>
</tr>
</table>
<div class="div-container">
<div class="left"> </div>
<div class="center">Div display:table CSS method | Does not work in IE6/7</div>
<div class="right"> </div>
</div>
<div class="div-abs-container">
<div class="inner">Div method with absolute positioning | Works in IE6+</div>
<div class="div-abs-background"></div>
</div>
</body>
<html>
Please suggest any ideas if you have to improve the 3rd method.