Question

Here’s some HTML.

<div id = "header">
  <div id = "menu">
    <ul>
      <li><a href = "#">Home</a></li>
      <li><a href = "#">Browse</a></li>
      <li><a href = "#">Account</a></li>
      <li><a href = "#">About</a></li>
    </ul>
</div>

And, here’s some CSS

#menu
{
  width: 80%;
  height: 30px;
}

#menu li a
{
 display: block;
 background-color: #999999;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 30px; 
 text-align: center;   
}

The above HTML and CSS give 4 rectangles. I’d like to have those rectangles to be evenly stretched horizontaly inside the the menu div.

Each time I try, I either get free space after About rectangle (i.e. the last rectangle) or get the About box flow to the next line.

Thanks for helping

Answer 1

You need to add:

#menu li a
{  
 float:left;
 width:25%;
}

#menu li
{
 display:inline;   
}

Demo: http://jsfiddle.net/BPyUB/