how to create a multi column list with css?

Question

I want to create a fixed layout that displays some images. for example, a "table" of 3 images in a row and 3 images in a column. Also i need that every li conatins some fixed width and height and the image centered and alignet to top.

So i've thinked in something like this:

<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>

But i don't know css, still i've created some like this but still doesn't work...

ul {display: block; text-align: center; border:#666666 solid 1px; height: 150px; padding:0; margin:0;}
li { list-style:none; float:left; width: 150px; height: 150px; margin-bottom: 32px;}

Fixed version:

ul{ height: 180px; text-align:center;padding:0;}
li{list-style:none;padding:0;width: 25%;height: 180px;float: left; display:inline-block;}

Note: Only works for only one <ul> with many <li>, the columns are setted changing the width of the <li>. 25% means 4 columns, 33% = 3 columns, etc. Formula: 100/(desired columns).

Jeaf Gilbert · Accepted Answer · 2010-07-08 14:43:05Z

2

I've made 3x3 box with list tag and uploaded here, hope it help you Sein.

CSS:

<style type="text/css">
    ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; }
    li { float:left; width:150px; height:150px; margin:2px; padding:3px; background:#CCCCCC; text-align:center; }
    li img { max-width:144px; }
</style>

HTML:

<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>

edited Jul 8, 2010 at 14:43

answered Jul 8, 2010 at 9:50

Jeaf Gilbert

12k19 gold badges84 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

desertwebdesigns · Accepted Answer · 2010-07-08 04:27:46Z

2

You're almost there Sein. All I did to make it work was removed the float: left; and replaced it with display: inline-block; on the <li> tag. That lined everything up perfectly for me. If you have any issues with the vertical alignment, try setting the following on the <img> tags: vertical-align: top;

There is a phenomenal article on the Mozilla WebDev blog for addressing this: Cross-Browser Inline-Block

answered Jul 8, 2010 at 4:27

desertwebdesigns

1,0458 silver badges14 bronze badges

2 Comments

Sein Kraft Over a year ago

Yep, but inline-block don't allows to set height :P But well, i've solved that. Fixed on the main post.

desertwebdesigns Over a year ago

quirksmode.org/css/display.html#inlineblock - "An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block." Behaving like a block means you can set a specific height and width, I do it all the time with horizontal navigation menus.

Collectives™ on Stack Overflow

how to create a multi column list with css?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related