Problem with unordered list

[maxxxx]

I have this unordered list that i’m trying to get it to show 5 columns accross then continue on the next row. So 5 colums side by side and then continue on next row. But it’s not working. Can someone help me please?

CSS Code:

@charset “UTF-8”;
/* CSS Document */

#wrapper {
background-color:#FFF;
width: 780px;
margin: auto;
}

/* — navigation starts — */

#header {
width: 100%;
height: 229px;
margin: auto;
}

#header img {
width: 100%;
height: 100%;
}

ul {
display: block;
width: 100%;
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}

ul li {
width: 111px;
text-align: center;
display: block;
position: relative;
float:left;
}

li ul {
display: none;
position: relative;
z-index: 1;

}

ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover {
background: #617F8A;
}

li:hover ul {
display: block;
position: absolute;
}

li:hover li {
float: none;
font-size: 11px;
}

li:hover a {
background: #617F8A;
}

/* — navigation ends — */

/* — information starts — */

#content
{
position: relative;
top: 40px;
font-size:16px;
font-family: Verdana, Geneva, sans-serif;
}

#footer {
margin-top: 100px;
text-align: center;
}

/* — information ends — */

/* — Advertising starts — */

#adverts {
width: 95%;
margin: auto;
text-align: center; /* Only to align alternate image text for visulization */
}

#adverts #addWarning {
float: left;
font-size: smaller;
}

#adverts #single {
clear: both;
}

#adverts #single img {
width: 100%;
}

#adverts .double img {
width: 50%;
display: inline-block;
float: left;
}

#adverts .trible img {
width: 33%;
display: inline-block;
float: left;
}

/* — Advertising Ends — */

[maxxxx]

I see my code did not come up. Here is the link

http://www.cjwebconsulting.com/destination/canada.html

[Senff]

Why don’t you give the LI’s a width of 20%? That way, there will always be five per row, regardless of the width of its container.

Also, don’t put paragraphs within unordered lists (like your province titles), unless it’s wrapped in an

[maxxxx]

Where in my CSS is my LI’s? and this is what it looks like now that I wraped my

.

http://www.cjwebconsulting.com/destination/canada.html

[Author]

Posts