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