How can I set the width of List elements

[donpro]

Hi,

I have an unordered list that displays for elements horizontally. I'd
like each to take up 25% of the browser window but my code does not
work. Can someone help? The code is shown below.

HTML Code
-----------------
<div id="footer">
<ul>
<li id="our_company ">Our Company</li>
<li id="vessel_sche dules">Vessel Schedules</li>
<li id="make_a_book ing">Make a Booking</li>
<li id="rate_reques t">Rate Request</li>
</ul>
</div>

CSS Code
---------------
#footer {
margin: 0;
padding: 0;
clear: both;
}

#footer ul {
margin: 0;
padding: 5px;
list-style: none;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
}

#footer li {
display: inline;
color: white;
font-weight: bold;
}

#our_company {
width: 25%;
}

#vessel_schedul es
width: 25%;
}

#make_a_booking
width: 25%;
}

#rate_request
width: auto;
}

[microgolf]

Re: How can I set the width of List elements

On 26 mei, 19:48, donpro <donpro-2...@rogers.com wrote:

Hi,
>
I have an unordered list that displays for elements horizontally. I'd
like each to take up 25% of the browser window but my code does not
work. Can someone help? The code is shown below.
>
HTML Code
-----------------
<div id="footer">
<ul>
<li id="our_company ">Our Company</li>
<li id="vessel_sche dules">Vessel Schedules</li>
<li id="make_a_book ing">Make a Booking</li>
<li id="rate_reques t">Rate Request</li>
</ul>
</div>
>
CSS Code
---------------
#footer {
margin: 0;
padding: 0;
clear: both;
>
}
>
#footer ul {
margin: 0;
padding: 5px;
list-style: none;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
>
}
>
#footer li {
display: inline;
color: white;
font-weight: bold;
>
}
>
#our_company {
width: 25%;
>
}
>
#vessel_schedul es
width: 25%;
>
}
>
#make_a_booking
width: 25%;
>
}
>
#rate_request
width: auto;
>
}

http://www.alistapart.com/articles/multicolumnlists

and this is the part i think youll be interested in...

The technique is simple: give the list items a fixed width and float
them left.

The list items wrap horizontally like words in a paragraph. Generally
speaking, when a series of blocks are floated left or right, they
align horizontally and wrap around when they reach the maximum width
of their container. If just three items can fit on one row, as in this
example, the list naturally wraps into rows of three columns.

The XHTML markup is a straightforward list with no special classes or
other attributes required. To prevent subsequent page elements from
being affected by the float I’ve contained the list in a <divand
cleared the float with a (non-semantic) <br />:

<div class="wrapper" >
<ol

><li><a href="#">Aloe</a></li
><li><a href="#">Bergam ot</a></li

...

><li><a href="#">Oregan o</a></li
><li><a href="#">Pennyr oyal</a></li
></ol>

<br />
</div><!-- .wrapper -->

The essential CSS is brief:

/* allow room for 3 columns */
ol
{
width: 30em;
}

/* float & allow room for the widest item */
ol li
{
float: left;
width: 10em;
}

/* stop the float */
br
{
clear: left;
}

/* separate the list from subsequent markup */
div.wrapper
{
margin-bottom: 1em;
}