theblackgold
Technical User
I have several centered, equal-sized float left div's with text inside of them, with a fixed width sidebar on the right. My intent is that, if the screen is wide enough, they will all sit side-by-side and centered on the space not taken by the sidebar. When the screen is too narrow, they start to stack on each other in sort of a grid.
I've gotten it to work perfectly in Opera but it fails in IE, where although everything stacks properly with screen size, it's just always floated to the left of the screen, so I'm assuming my centering logic is failing for IE, but I can't figure out why. Here's the relavent code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="sidebar">
</div>
<div id="main">
<div id="list">
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
</div>
</div>
</div>
</body>
</html>
And the CSS:
@charset "utf-8";
body {
padding: 0;
background: #000;
margin: 0;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
line-height: 16px;
color: #CCC;
}
#wrapper {
max-width: 1920px;
min-width: 985px;
padding-right: 10px;
padding-left: 10px;
}
#sidebar {
width: 200px;
float: right;
}
#main {
margin-right: 200px;
}
#main #list {
margin-top: 5px;
position: relative;
float: left;
left: 50%;
}
#main #list #item {
width: 315px;
margin-bottom: 10px;
padding: 5px;
height: 235px;
margin-right: 10px;
border: 1px solid #0F3;
background: #333;
float: left;
position: relative;
left: -50%;
}
It took a bit of research to figure out using relative positioning with plus and minus 50% left values could center something, but I can't figure out why it doesnt work in IE when from what I read it should? I guess I'm missing something simple?
I've gotten it to work perfectly in Opera but it fails in IE, where although everything stacks properly with screen size, it's just always floated to the left of the screen, so I'm assuming my centering logic is failing for IE, but I can't figure out why. Here's the relavent code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="sidebar">
</div>
<div id="main">
<div id="list">
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
<span class="item">
</span>
</div>
</div>
</div>
</body>
</html>
And the CSS:
@charset "utf-8";
body {
padding: 0;
background: #000;
margin: 0;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
line-height: 16px;
color: #CCC;
}
#wrapper {
max-width: 1920px;
min-width: 985px;
padding-right: 10px;
padding-left: 10px;
}
#sidebar {
width: 200px;
float: right;
}
#main {
margin-right: 200px;
}
#main #list {
margin-top: 5px;
position: relative;
float: left;
left: 50%;
}
#main #list #item {
width: 315px;
margin-bottom: 10px;
padding: 5px;
height: 235px;
margin-right: 10px;
border: 1px solid #0F3;
background: #333;
float: left;
position: relative;
left: -50%;
}
It took a bit of research to figure out using relative positioning with plus and minus 50% left values could center something, but I can't figure out why it doesnt work in IE when from what I read it should? I guess I'm missing something simple?