I am trying to create three boxes for content on my main page, but sucking as much as I do at css I am having some problems.

I am using <ul><li> to get them to line up horizontally properly and thats fine, but I can seem to get them to fill up the full space.

for my related css I have:

#featured ul{
width:100%;
height: 250px;
  float: left;
  margin-left:5px;
  text-align:left;
}
#featured ul li {
  display: inline;
  padding: 0;
  list-style: none;
  width: 33%;
border: thin solid rgb(0,0,0)
}

What should I have instead of width:33%;? I tried setting definite sizes (cm/px), but no luck.

Thanks all.

an inline object (intrinsic or implied) does NOT take height and width dimensions.
Float the <li>s left instead.

not forgetting to clear the float before closing the <ul>

Thanks chris youre awesome, theres never been a problem that you havent been able to help me out with