Moving unordered list code

I built this web page with unordered list in the content div tag. But it does not look right. It should be 5 unordered list accross and then on the next row another 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canada-Accessible</title>

<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

<div id="header">

    <img src="images/banner.jpg" alt="banner">

    <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="">Destinations</a>
            <ul>
                <li><a href="canada.html">Canada</a></li>
                <li><a href="United States.html">Untited States</a></li>
                <li><a href="International.html">International</a></li>
            </ul>
        </li>
        <li><a href="">Lodging</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>
        </li>    
        <li><a href="">Transportation</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 5</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
        <li><a href="">Link 6</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 7</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
    </ul>
   <br>
   <h2 align="center">CANADA</h2> 
</div><!-- End header-->
     <br><br>


    <div id="content">

    <ul >
 <p><strong>Alberta</strong></p>
 <li>Airdrie</li>
 <li>Brooks</li>
 <li>Calgary</li>
 <li>Camrose</li>
 <li>Cochrane</li>
 <li>Edmonton</li>
 <li>Fort McMurray</li>
 <li>Grande Prairie</li>
 <li>Leduc</li>
 <li>Lethbridge</li>
 <li>Medicine Hat</li>
 <li>Okotoks</li>
 <li>Red Deer</li>
 <li>Saint Albert</li>
 <li>Spruce Grove</li>
</ul>

 <ul>
  <p><strong>British Columbia</strong></p>
 <li>Abbotsford</li>
 <li>Campbell River</li>
 <li>Chilliwack</li>
 <li>Courtenay</li>
 <li>Duncan</li>
 <li>Kamloops</li>
 <li>Kelowna</li>
 <li>Nanaimo</li>
 <li>Penticton</li>
 <li>Port Alberni</li>
 <li>Prince George</li>
 <li>Vancouver</li>
 <li>Vernon</li>
 <li>Victoria</li>
 <li>White Rock</li> 
 </ul>

 <ul>
  <p><strong>Manitoba</strong></p>
 <li>Altona</li>
 <li>Brandon</li>
 <li>Dauphin</li>
 <li>Flin Flon</li>
 <li>Morden</li>
 <li>Neepawa</li> 
 <li>Selkirk</li>
 <li>Steinbach</li>
 <li>Stonewall</li>
 <li>Swan River</li>
 <li>The Pas</li>
 <li>Thompson</li>
 <li>Virden</li>
 <li>Winkler</li>
 <li>Winnipeg</li>
 </ul>

<ul>
  <p><strong>New Brunswick</strong></p>
 <li>Bathurst</li>
 <li>Campbellton</li>
 <li>Caraquet</li>
 <li>Dalhousie</li>
 <li>Edmundston</li>
 <li>Fredericton</li>
 <li>Grand Falls</li>
 <li>Moncton</li>
 <li>Oromocto</li>
 <li>Saskvillee</li>
 <li>Saint John</li>
 <li>Saint Stephen</li>
 <li>Shediac</li>
 <li>Sussex</li>
 <li>Woodstock</li>
 </ul>

 <ul>
  <p><strong>Newfoundland and Labrador</strong></p>
 <li>Bay Roberts</li>
 <li>Carbonear</li>
 <li>Channel-Port aux Basques</li>
 <li>Conception Bay South</li>
 <li>Corner Brook</li>
 <li>Gander</li>
 <li>Goose Bay</li>
 <li>Grand Bank</li>
 <li>Grand Falls-Windsor</li>
 <li>Labrador City</li>
 <li>Marystown</li>
 <li>Mount Pearl</li>
 <li>Paradise</li>
 <li>Saint Johns</li>
 <li>Stephenville</li>
 </ul>

<div class="clearfix"></div>

 <ul>
  <p><strong>Nova Scotia</strong></p>
 <li>Amhers</li>
 <li>Antigonish</li>
 <li>Bridgewater</li>
 <li>Glace Bay</li>
 <li>Halifax</li>
 <li>Kentville</li>
 <li>New Glasgow</li>
 <li>New Waterford</li>
 <li>Pictou</li>
 <li>Port Hawkesbury</li>
 <li>Springhill</li>
 <li>Sydney Mines</li>
 <li>Sydney</li>
 <li>Truro</li>
 <li>Yarmouth</li>
 </ul>



    </div><!-- End content-->




<div id="footer">
<h6>Copyright © 2011 Accessible Destinations | All rights
reserved | </h6> </div><!--End footer-->


</div><!--End wrapper-->


</body>
</html>


This is the CSS code below.

@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;
 float: left;
 width:auto
 list-style-type: none;
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .clearfix {
 float:left;
 width:100%;
 clear:both;
 margin-bottom:10px;
 }


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 --- */

Contributors

Replies

2 Days

Discussion Span

1 Year Ago

Last Updated

Views

charisma

Light Poster

32 posts since Oct 2008

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

1 Year Ago

I took a quick scan of the code and found these two items that do not seem correct. Not sure if its going to fix your issue, but anyway...

Line #235, you are missing a semicolon after the width style.
Also, from my understanding, the paragraph element is not an element that can be nested within the unordered list element.

JorgeM

Senior Poster

3,997 posts since Dec 2011

Reputation Points: 294

Solved Threads: 543

Skill Endorsements: 115

1 Year Ago

I tryed both things, and nothing made a difference.

charisma

Light Poster

32 posts since Oct 2008

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

1 Year Ago

you mean:

#content ul li{ 
    width:145px;
}

Biiim

Posting Pro

504 posts since Oct 2011

Reputation Points: 104

Solved Threads: 83

Skill Endorsements: 7

1 Year Ago

Why dont you use table instead? I checked the output and it was lookin like table. So using table makes sense for me. Is it college project? Be careful with managing your layout because later changes might lead you to frustration. Good luck:)

Sahil89

Posting Whiz in Training

200 posts since Sep 2011

Reputation Points: 10

Solved Threads: 22

Skill Endorsements: 1

1 Year Ago

Is this what you are looking for?

I added this bit of code:

#content ul {
    display:block;
    float:left;
    width:115px;
    padding:10px 20px;
 }

 #content ul p {
    display:block;
    text-align:center;
 }










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canada-Accessible</title>

<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
@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;
 float: left;
 width:auto
 list-style-type: none;
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .clearfix {
 float:left;
 width:100%;
 clear:both;
 margin-bottom:10px;
 display: block;
 }


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
{
    margin-top:40px;
    font-size:16px;
    font-family: Verdana, Geneva, sans-serif;
}

#content ul {
    display:block;
    float:left;
    width:115px;
    padding:10px 20px;
 }

 #content ul p {
    display:block;
    text-align:center;
 }


#footer {
    clear:both;
    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;
}


</style>


</head>

<body>

<div id="wrapper">

<div id="header">

    <img src="images/banner.jpg" alt="banner">

    <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="">Destinations</a>
            <ul>
                <li><a href="canada.html">Canada</a></li>
                <li><a href="United States.html">Untited States</a></li>
                <li><a href="International.html">International</a></li>
            </ul>
        </li>
        <li><a href="">Lodging</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>
        </li>    
        <li><a href="">Transportation</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 5</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
        <li><a href="">Link 6</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 7</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
    </ul>
   <br>
   <h2 align="center">CANADA</h2> 
</div><!-- End header-->


    <div id="content">

    <ul >
         <p><strong>Alberta</strong></p>
         <li>Airdrie</li>
         <li>Brooks</li>
         <li>Calgary</li>
         <li>Camrose</li>
         <li>Cochrane</li>
         <li>Edmonton</li>
         <li>Fort McMurray</li>
         <li>Grande Prairie</li>
         <li>Leduc</li>
         <li>Lethbridge</li>
         <li>Medicine Hat</li>
         <li>Okotoks</li>
         <li>Red Deer</li>
         <li>Saint Albert</li>
         <li>Spruce Grove</li>
    </ul>

 <ul>
      <p><strong>British Columbia</strong></p>
     <li>Abbotsford</li>
     <li>Campbell River</li>
     <li>Chilliwack</li>
     <li>Courtenay</li>
     <li>Duncan</li>
     <li>Kamloops</li>
     <li>Kelowna</li>
     <li>Nanaimo</li>
     <li>Penticton</li>
     <li>Port Alberni</li>
     <li>Prince George</li>
     <li>Vancouver</li>
     <li>Vernon</li>
     <li>Victoria</li>
     <li>White Rock</li> 
 </ul>

 <ul>
  <p><strong>Manitoba</strong></p>
 <li>Altona</li>
 <li>Brandon</li>
 <li>Dauphin</li>
 <li>Flin Flon</li>
 <li>Morden</li>
 <li>Neepawa</li> 
 <li>Selkirk</li>
 <li>Steinbach</li>
 <li>Stonewall</li>
 <li>Swan River</li>
 <li>The Pas</li>
 <li>Thompson</li>
 <li>Virden</li>
 <li>Winkler</li>
 <li>Winnipeg</li>
 </ul>

<ul>
    <p><strong>New Brunswick</strong></p>
     <li>Bathurst</li>
     <li>Campbellton</li>
     <li>Caraquet</li>
     <li>Dalhousie</li>
     <li>Edmundston</li>
     <li>Fredericton</li>
     <li>Grand Falls</li>
     <li>Moncton</li>
     <li>Oromocto</li>
     <li>Saskvillee</li>
     <li>Saint John</li>
     <li>Saint Stephen</li>
     <li>Shediac</li>
     <li>Sussex</li>
     <li>Woodstock</li>
 </ul>

 <ul>
      <p><strong>Newfoundland and Labrador</strong></p>
     <li>Bay Roberts</li>
     <li>Carbonear</li>
     <li>Channel-Port aux Basques</li>
     <li>Conception Bay South</li>
     <li>Corner Brook</li>
     <li>Gander</li>
     <li>Goose Bay</li>
     <li>Grand Bank</li>
     <li>Grand Falls-Windsor</li>
     <li>Labrador City</li>
     <li>Marystown</li>
     <li>Mount Pearl</li>
     <li>Paradise</li>
     <li>Saint Johns</li>
     <li>Stephenville</li>
 </ul>



 <ul>
  <p><strong>Nova Scotia</strong></p>
 <li>Amhers</li>
 <li>Antigonish</li>
 <li>Bridgewater</li>
 <li>Glace Bay</li>
 <li>Halifax</li>
 <li>Kentville</li>
 <li>New Glasgow</li>
 <li>New Waterford</li>
 <li>Pictou</li>
 <li>Port Hawkesbury</li>
 <li>Springhill</li>
 <li>Sydney Mines</li>
 <li>Sydney</li>
 <li>Truro</li>
 <li>Yarmouth</li>
 </ul>



    </div><!-- End content-->



<div class="clearfix"></div>
<div id="footer">
<h6>Copyright © 2011 Accessible Destinations | All rights
reserved | </h6> </div><!--End footer-->


</div><!--End wrapper-->


</body>
</html>

gabrielcastillo

Junior Poster in Training

54 posts since Apr 2012

Reputation Points: 0

Solved Threads: 5

Skill Endorsements: 0

This article has been dead for over three months: Start a new discussion instead

You