Question

What’s the best practice for doing a horizontal list in css? Now I know this is a very basic question but the effect I’m looking for is in a website like this: http://www.frontend2011.com/.

If you scroll down to the video portion with the 4 column lists, you’ll see a good use of it. But if I give something like float: left and margin-left: #px; in the CSS, my last list item always falls to the next row before not even getting close to the edge of the div box model.

I’ve heard it’s because of the box model and the border/padding/margin but what’s the best way to get past this? I would like the lists to touch the right and left sides of the div but this seems impossible for me.

Answer 1

this could be a good use of box-sizing property (supported by all browser, IE8 included): given an unordered list (and assuming list-items all with the same height) you can assign this style to every <li>:

li {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

   float   : left;
   width   : 25%;
   padding : 15px; /* this will be applied internally, due to 
                      box-sizing property */

}

then if you want to force a clearing after every 4^th li, just add

li:nth-child(4n) { 
   clear : left; 
}

otherwise, if you can’t be sure that every <li> have always the same height then use inline-block position instead of float.