CSS3 div ganzen Ort

Question

Ich kämpfe mit aller Macht mit dem folgenden 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; 
} 

Ich habe noch meinen PC als Web-Host Sie die Website mit dem CSS hier sehen können: http://74.71.27.20/d499

Jede Hilfe wäre willkommen.

Meine Master-Seite ruft einfach Container, dann Header und Nav und Kategorien und Fußzeile.

Answer 1

Fügen Sie eine clear:both; als erste div ist Floated links.

Answer 2

Der beste CSS-Rat, den ich geben kann, wenn Sie div Probleme haben, ist in YUI zu schauen, es ist NUR css, also denken Sie nicht, dass es irgendeine verrückte neue Technologie ist, aber es kann eine große Hilfe sein.

Dit Einführungsvideo über sie: http://video.yahoo.com/watch/1373808/4732784

Das obige Video ist etwas veraltet, aber gibt eine gute Idee und das Web ist voll der benötigten Ressourcen.