CSS3 div dans tous les sens

Question

Je me bats avec force avec le code CSS3 suivant:

* 
{ 
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; 
} 

Je actuellement obtenu mon PC comme un hébergeur, vous pouvez consulter le site avec le CSS ici: http://74.71.27.20/d499

Toute aide serait appréciée.

Ma page maître appelle simplement conteneur, puis en-tête et nav et catégories et pied de page.

Answer 1

Ajoutez un clear:both; comme premier div flottant vers la gauche.

Answer 2

Le meilleur conseil CSS que je peux donner si vous avez des problèmes de div est de regarder YUI c'est JUSTE css, donc ne pense pas que c'est une nouvelle technologie folle mais cela peut être une aide énorme.

Visionnez cette vidéo d'introduction à ce sujet: http://video.yahoo.com/watch/1373808/4732784

La vidéo ci-dessus est un peu vieillot mais donne une bonne idée et le web est plein des ressources nécessaires.