Consider the following HTML and CSS. The desired result is the two pink boxes are centered within the single green box. The text is NOT centered. There is padding on the left and right of each box. I should be able to have 1 or more of these boxes, up to as many as 8; they should all float to fill in the container div. I’ve been bangin my head on this one for weeks now, and nothing I read or try seems to work – margin: auto, display:inline, etc etc. I added the box-margin div to create the padding when trying to use margin:auto, but it still didn’t get the result I was looking for. Halp?
HTML
<body>
<div id="page">
<div id="main">
<div class="box-group">
<div class="box-margin">
<div class="box">
<h2>Data</h2>
<ul>
<li><a href="/URL">Link</a></li>
</ul>
</div>
</div>
<div class="box-margin">
<div class="box">
<h2>Reports</h2>
<ul>
<li><a href="/URL/">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body
{
margin: 0;
padding: 0;
}
#page
{
width: 95%;
min-width:800px;
border: thin solid red;
}
#main
{
padding: 30px 30px 15px 30px;
margin-bottom: 30px;
min-width: 875px;
border: thin solid black;
}
.box-group
{
width: 100%;
padding: 10px;
border: thin solid green;
}
.box-margin
{
margin: auto;
width: 275px;
float: left;
padding: 15px;
}
.box
{
border: thin ridge pink;
height: 200px;
width: 250px;
}
Have a look at this page on centered floats. It has a neat trick that might not work for you (it will center them as a group, but not per-line, if they wrap), but it also details a fix for
display: inline-blockin IE.