Multi-row CSS Nav

Question

I'm creating a content panel switcher, with 6 nav items on 2 row. So 3 items on each row. In all, 6 items, 2 rows, 3 columns, with each column aligned left evenly. How do I create this with the minimal amount of HTML. I'm sure I could do it, but I don't want to add a bunch of divs and junk. Help? :)

Answer 1

The HTML code would be similar to this

  <div id="nav"> 
    <ul> 
        <li>data</li> 
        <li>data</li> 
    </ul> 
    <ul> 
        <li>more data<li> 
        <li>more data</li> 
    </ul> 
    <ul>
        <li>even more data<li> 
        <li>even more data</li> 
    </ul>

</div> 

and the CSS would be

ul { 
    float: left; 
    list-style: none;
} 

My answer is similar to ggregoire except you asked for 3 items in 2 rows. I am unable to post comments so I had to write a new answer.

Answer 2

HTML :

<div id="navtabs">
    <ul>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
    <ul id="right">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
</div>

CSS :

ul {
    float: left;
}

#right {
    margin-left: 10px;
}

Example: http://jsfiddle.net/ddYsk/

Answer 3

Using styled unordered lists is the best choice. They are semantic by nature, so they're SEO and screen-reader friendly.

If it's a horizontal menu, use li {float:left}, otherwise style only the A tags in the list, not the LIs for best results.

Simple menu:

<ul>
   <li><a href="">item A</a></li>
   <li><a href="">item B</a></li>
</ul>

Multi-level menu.

.menu {
  ul li { position:relative; float:left }
  ul li a { display:block; ... your styles ...}
  ul li ul {position:absolute ..position as needed ...}
  ul li ul li {float:none}
}

<div class='menu'>
<ul>
   <li><a href="">item A</a>
      <ul>
        <li><a href="">item A-1</a></li>
        <li><a href="">item A-2</a></li>
     </ul>     
   </li>
   <li><a href="">item B</a></li>
</ul>
</div>

You'be best to use this with a CSS reset: http://developer.yahoo.com/yui/reset/