Question

Ok, so am I missing something but I can’t seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.

What I’m trying to do is get grey boxes to line up in a row so that the first box’s left hand edge is inline with left hand edge of the #wrapper div and the last box’s right hand edge is inline with the #wrapper div’s right hand edge.

I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I’m missing?

#wrapper {
 width: 400px;
 height: 300px;
 background-color:#F0F0F0;
 margin: 10px auto;    
}

.box {
 width: 92px;
 height:92px;
 background-color:#333;
 margin:0px 10px 10px 0px;
 float:left;
}

<div id="wrapper">

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

</div>​  

Answer 1

I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).

Here’s a fiddle demo!

The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.

ul {
    font-size: 0 !important; /* remove physical spaces between items */
    text-align: justify;
    text-justify: distribute-all-lines; /* distribute items in IE */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* fully justify all items in browsers other than IE */
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}

ul li {
    text-align: left; /* customize to suit */
    vertical-align: top; /* can customize to suit */
    display: inline-block;
    width: 31.3%; /* optional, only need for text content to wrap */
    margin-bottom: 1em; /* optional, customize to suit */
}