123.456.789.000/index.php
<html>
<head>
<title>Unique Triathlon Club</title>
<meta charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li><a href="http://unique-triathlon.com">Home</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/join">Join</a></li>
<li><a href="/members">Members</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/training">Training</a></li>
<li><a href="https://www.facebook.com/groups/unique-triathlon/">Facebook</a></li>
<ab><a href="/about">Unique Triathlon Club</a></ab>
</ul>
<ul id=main>
<p>Main Section</p>
</ul>
</body>
</html>
123.456.789.000/style.css
body {
background:#000 url(bg.jpg) center top no-repeat;
background-size: cover;
color: #c1c1c1;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#main{
display:inline-block;
float:left;
}
How can I adjust the layout to have content in the main section appear below the background image while keeping the navigation bar at the top? Visit http://123.456.789.000 for the current code.