CSS ul userlist formatting

Question

Hi,

I am trying to break away from using tables in my formatting, and am trying out using userlist html tags <ul>

Say I have a panel with 10 controls, and I want a 3 columns display, therefore 3 controls in each row, and a total of 4 rows for 10 controls.

Should I use 4 different <ul> or should I just stack them inside one <ul>

Please tell me the advantages and disadvantages

Thanks

Answer 1

The advantages of putting them in 1

• One place to maintain
• Is semantic

The advantage of more than 1

• could be easier to style.

If you put them in 1 unordered list, and then wanted 3 columns, you could do this

ul {
    overflow: hidden; /* force it to expand to floated elements */
}

ul li {
    display: block;
    width: 32%; /* slightly less as browsers can make a muck of percentages */
    float: left;

}

Update

From George IV in the comments, see above.

This will float them left to right, in 3 columns. You could also try using inline-block to achieve this, however it's implementation is a little more difficult to get cross browser.

Answer 2

'ul' stands for unordered list and is used for listing. Instead use 'div'

<div id="container">
  <div class="control">
  <div class="control">
  <div class="control">
</div>

and use the CSS

#container {
width: 100%;
}

#control {
width: 33%;
float: left;
}