CSS3は、私は、次のCSS3のコードで激しく苦しんでいますすべての場所

Question

上DIV： http://74.71.27.20/d499

：私は現在、あなたがここにCSSでサイトを表示できるWebホストとしての私のPCを持って

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

助けていただければ幸いです。

私のマスターページは、単純に、ヘッダとNAVとカテゴリとフッターの容器を呼び出します。あなたはdivの問題がある場合、私は与えることができ

Answer 1

あなたの最初のdivが左浮いているようclear:both;を追加します。

Answer 2

最高のCSSのアドバイスはそれだけで、CSSでYUIに見て、それはいくつかのクレイジーな新しい技術であるとは思わないが、それは大きな助けとなることができます。

ウォッチ、それについては、この紹介ビデオ：http://video.yahoo.com/watch/1373808/4732784

上記のビデオは少し時代遅れですが、良いアイデアを提供し、ウェブが必要なリソースがいっぱいです。