CSS3 div all over the place - asp.net

Question

I am struggling mightily with the following CSS3 code:
*
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), color-stop(.7,#FFFFFF));
padding: 0px 6%;
}
#nav {
background: url(http://74.71.27.20/d499/content/images/nav_background.png);
}
ul#nav {
float: left;
}
ul#nav li {
display: inline;
width: 100%;
}
ul#nav li a {
display: inline;
float: left;
margin-right: 25px;
margin-left: 10px;
font-size: 16px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}
ul#nav li a:hover {
color: #fff;
}
ul#nav li.selected a {
color: #fff;
}
ul#nav li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url(http://74.71.27.20/d499/content/images/rss.png) left center no-repeat;
}
#container
{
float: left;
background: #FFFFFF;
overflow: hidden;
padding: 0 0 15px 10px;
}
#header
{
float: left;
width: 100%;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(http://74.71.27.20/d499/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(http://74.71.27.20/d499/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
float: left;
overflow: hidden;
padding: 0 0 15px 10px;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
footer {
float: left;
left: 0;
width: 100%;
background: #222;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
float: left;
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url(http://74.71.27.20/d499/content/images/sidebar_section_background.png) repeat-x;
/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
ul#categories
{
siaply: inlinel
margin: 0 0 0 22px;
list-style: none;
}
#categories a:link, #categories a:visited
{
float: left;
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Begin: Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
I currently got my PC as a web host you can view the site with the CSS here:
http://74.71.27.20/d499
Any help would be appreciated.
My master page simply calls container then header and nav and categories and footer.

Answer 1

The best CSS advice I can give if you have div issues is to look into YUI it is JUST css, so don't think it is some crazy new technology but it can be a huge help.
Watch this introductory video about it: http://video.yahoo.com/watch/1373808/4732784
The above video is a little dated but gives a good idea and the web is full of the required resources.

Answer 2

Add a clear:both; as your first div is floated left.