Float left
s, but keep the alignment

Question

Id like to keep the <li>s aligned evenly at the top, here's my CSS:

ul {
   list-style-type:none;
   margin:0;
   padding:0;
   width:510px; 
}

li {
   width:230px;
   border:1px solid #ccc;
   padding:5px;
   float:left;
   margin:5px 5px 0 0;  
}

Here is in action.

Any way to align the top of the <li>s evenly?
Here is a picture of what I would like it to be: Example layout

What do you mean keep them aligned evenly? It looks even to me. — Justin Helgerson, Apr 17 '13 at 21:22
In other words, keep the boxed aligned to the top, not bottom. — Richard, Apr 17 '13 at 21:23

Miljan Puzović · Accepted Answer · 2013-04-17T21:45:57.563

2

Instead float, use display: inline-block; vertical-align: top;

http://jsfiddle.net/t6tML/11/

edited Apr 17 '13 at 21:45

answered Apr 17 '13 at 21:34

Miljan Puzović

5,840
1
24
30

It starts to get tricky on IE7 and before https://developer.mozilla.org/en-US/docs/CSS/display – buhbang Apr 17 '13 at 21:40
Inline-block works fine in IE8 http://caniuse.com/#feat=inline-block. Also, please note in your question next time that you need code which works in IE8. – Miljan Puzović Apr 17 '13 at 21:40
If you have problem with IE8 have a look at here: [ie8 display inline-block not working](http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working) – totymedli Apr 17 '13 at 21:41
This is my DOCTYPE, and it's not working on my end. – Richard Apr 17 '13 at 21:42
Do you must use that DOCTYPE? – Miljan Puzović Apr 17 '13 at 21:44
Try with html5 DOCTYPE. Like this ` ` – Miljan Puzović Apr 17 '13 at 21:47
That does not work either, display-inline only works with tags that are natively inline such as spans. I replaced LIs with SPANS and replaced UL with a DIV. It it now works in IE8. – Richard Apr 17 '13 at 22:24

score 0 · Answer 2 · answered Apr 17 '13 at 21:23

0

The width of the ul needs to equal the combined width of the li elements:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width: 1482px;
}

Each of your li elements has a width of 230px, 5px horizontal margin, 10px horizontal padding, and 2px horizontal border so:

230 + 5 + 10 + 2 = 247px

247 * 6 li elements = 1482px

Full code: http://jsfiddle.net/t6tML/3/

answered Apr 17 '13 at 21:23

chrx

3,524
1
15
17

Yes, but I need the width to be 510px and I need the boxes to stack. – Richard Apr 17 '13 at 21:24
Not like Pinterest, I don't want the boxes to merge into each other. – Richard Apr 17 '13 at 21:25
You want them along the left side? – chrx Apr 17 '13 at 21:26

Float left s, but keep the alignment

2 Answers2

Float left
s, but keep the alignment