List items retrieved from query in 3 columns

[melting_dog]

Hi all,

 

I have a design that calls for me to list all the items - image thumbnails in this case -  that I retrieve from the database into 3 columns.

 

I can achieve that using float: left; but that makes putting anything below the list difficult. I need a better way of doing it.

 

My site is here: http://adamsherman.com.au/postureperfection/chairs/ (please note it is under construction!!)

 

and here is the css:

 

.productthumb{

padding: 10px;

margin: 10px;

width: 170px;

height: 190px;

float:left;

text-align:center;

}

 

Should I be using <ul> and <li> instead of individual divs?

 

Any help would be appreciated! Thanks!

[AyKay47]

 

Should I be using <ul> and <li> instead of individual divs?

 

yes, post the relevant code.

[Philip]

IMO I would use <ul> and <li> tags instead, since this is essentially a giant list.

 

However, for the float issue, you can use a clearfix (sort of a hack, but it works well.) My favorite implementation is over at http://stackoverflow.com/a/211467/398516

[AyKay47]

IMO I would use <ul> and <li> tags instead, since this is essentially a giant list.

 

However, for the float issue, you can use a clearfix (sort of a hack, but it works well.) My favorite implementation is over at http://stackoverflow.com/a/211467/398516

you can also use the "width, overflow" hack.

[melting_dog]

Thanks guys!

 

I tried using the <li> method but it just wasnt happening for me. But the overflow method works great.

 

Cheers!

[kevinblevins]

<ul>

  <li>Item one</li>

  <li>Item two</li>

  <li>Item three</li>

  <li>Item four</li>

  <li>Item five</li>

  <li>Item six</li>

  <li>Item seven</li>

  <li>Item eight</li>

  <li>Item nine</li>

  <li>Item ten</li>

  <li>Item eleven</li>

  <li>Item twelve</li>

</ul>

And here's the CSS that turns that standardlist into multiple columns:

 

ul {

    width: 700px;

    list-style-type:none;

}

li {

    width:180px;

    margin:15px 0 0 0;

    padding:0 10px 0 0;

    line-height:15px;

    float:left;

}