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

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