I'm having trouble centering a bunch of floating divs. I looked for SO quite a bit (in particular here and here ), but it seems to me that something is missing, I will send my code and, hopefully, someone here can understand what the problem is ...
What I would like to do is something like that
screenshot http://efredericks.net/layout.PNG
The behavior that I see now is that everything is swimming correctly, but is shifting to the left. No matter what I did, I can't get him to concentrate.
My external container is correctly located in the browser, but there is nothing inside.
HTML
<body>
<div id="outer_container">
<div id="container">
<div id="hdr">
<div id="hdr_right">
<h1><a href="#" id="lhome">logo</a></h1>
<div id="menu">
<ul>
<li><a id="menu_i1" href="#">item 1</a></li>
<li><a id="menu_i2" href="#">item 2</a></li>
<li><a id="menu_i3" href="#">item 3h</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="outer">
<div class="inner">a</div>
<div class="inner">b</div>
<div class="inner">c</div>
<div class="clear"></div>
<div class="inner">a</div>
<div class="inner">b</div>
<div class="inner">c</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
CSS
* {
margin: 0px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
color: #888750;
}
img {
border: 0px;
}
body {
background: #000;
}
margin: 0 auto;
position: relative;
}
#hdr {
background: #000;
height: 99px;
}
#hdr_right {
margin: 30px 2px 0px 0px;
height: 75px;
float: right;
}
#hdr img {
float: left;
border: 0px;
margin: 5px 0px 0px 5px;
}
#hdr ul {
margin-top: -10px;
}
#hdr li {
float: left;
padding: 0px 5px;
}
#main {
text-align: left;
background: #333;
}
.clear {
clear: both;
}
#outer {
overflow: auto;
padding: 5px;
width: 790px;
margin: 0 auto;
text-align: center;
}
.inner {
float: left;
background: #181818;
margin: 5px;
width: 200px;
}
source
share