Horizontal List help

HTML & CSS
1

I amtrying to create the H list so that each nsection is a fixed width but I can’t get it to work.

Each li should be a set width but I can’t get it to work, I imagine its a simple solution but 2 hours later and I can’t get it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#ulcontainer 
{
padding-bottom: 10px;
border-bottom: 1px solid #CACACA;
background-color:#00CCFF;
}

#ulcontainer li.normal 
{
display: inline;
list-style-type: none;
color:#666;
font-weight:bold;
width: 200px;
background-color:#0066FF;
}

#ulcontainer li.right 
{
display: inline;
list-style-type: none;
width: 200px;
background-color:#FF0000;
}

</style>
</head>

<body>

                    	<ul id="ulcontainer">
                        	<li class="normal">Size : 246KB</li>
                            <li class="normal">Type : pdf</li>
                            <li class="right"><a href="../ehs/commitment and expectations 2009.pdf" target="_blank"><img src="../images/download.png" /></a></li>
                        </ul>

</body>
</html>
2

There’s more to it, of course. You may want to check out Paul’s Everything about Floats page if you’re not used to working with them. Floats are usually the way to do it, but they do live by their own rules, the rebels : )

3

Brilliant, thank you

4 
#ulcontainer li.normal 
{
display: inline;
...

That’s your problem right there. The width you state later is getting ignored, because inlines can’t have set widths.

You set them inline so that you could get a horizontal menu? In this case, we would float the li’s. Floats start out with shrink-wrapped widths like inlines, but they are a sort of block, so you can set widths on them.