How can I set the width of List elements

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

donpro - 26 May 2008 18:48 GMT

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_schedules">Vessel Schedules</li>
<li id="make_a_booking">Make a Booking</li>
<li id="rate_request">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_schedules
width: 25%;
}

#make_a_booking
width: 25%;
}

#rate_request
width: auto;
}

Reply to this Message

microgolf - 26 May 2008 19:43 GMT

> Hi,
>
[quoted text clipped - 57 lines]
>
> }

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 <div> and
cleared the float with a (non-semantic) <br />:

<div class="wrapper">
<ol
><li><a href="#">Aloe</a></li
><li><a href="#">Bergamot</a></li
...
><li><a href="#">Oregano</a></li
><li><a href="#">Pennyroyal</a></li
></ol>
<br />
</div>

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;
}

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2008

How can I set the width of List elements