divに正しく整列する3列

私はちょうどジョムラと私のdivをテンプレートを作るときに垂直に整列させようとしていることについてちょっと勉強し始めました。問題は、右のdivがページの一番下の右側にあり、中央のdivが、正しく配置された唯一のdivである左のdivの下に少なくとも1文字の高さに揃えられていることです。フッタdivを見ることはできません（画像がテキストと一緒に黒くなっているのかもしれません）左、右、中央とフッターのdivはコンテナdiv内にあります。私はFirefoxでそれをプレビューし、コンテナの画像と枠線は正確に私がそれらを必要としていますが、divの内容はすべての場所にあります。 CSSコードを援助してください。これに関する助けがあれば助かります。また、DivのIDと構造体をcss awellの下に貼り付けます。ありがとうございます。divに正しく整列する3列

body{ 
margin: 0 auto; 
background-color: #000000; 
background-repeat: repeat; 
text-align: center;} 

#container { 
width: 900px; 
height: 759px; 
margin: 0 auto; 
border-left: 5px #ffffff solid; 
border-right: 5px #ffffff solid; 
background-repeat: no-repeat; 
background-image: url(../slices/images/images/content-slice.jpg);} 

#searchbox{ 

} 

#header{ 
width: 900px; 
height: 104px; 
background-repeat: no-repeat; 
background-image: url(../slices/Sf-Head-slice.jpg); 
margin: 0 auto; 
border-left: 5px #ffffff solid; 
border-right: 5px #ffffff solid; 
text-align: left;} 

#header2{ 
width: 900px; 
height: 108px; 
background-repeat: no-repeat; 
background-image: url(../slices/searchboxwithplayer-slice.jpg); 
margin: 0 auto; 
border-left:5px #ffffff solid; 
border-right:5px #ffffff solid; 
text-align: left;} 

#footer{ 
width: 900px; 
text-align: left; 
margin: 0 auto; 
height: 28px; 
background-repeat: no-repeat; 
background-image: url(../slices/images/footerslice.jpg);} 

#left{ 
text-align: left; 

margin: 0 auto; 
width: 220px; 
height: 752px; 
float: left;} 

#right{ 
text-align: left; 
margin: 0 auto; 
width: 220px; 
height: 752px; 
float: right;} 

#center{ 
text-align: left; 
margin: 0 auto; 
height: 752px; 
width: 400px; 
}

中央列が浮上されていないため、相続人のdiv

<body> 
    <div id="header">this is the header</div> 
    <div id="header2">this is header2 
<div id="searchbox">this is the searchbox 
</div> 
</div> 
    <div id="container">this is the container 
<div id="left">this is the left column</div> 
<div id="center">this is the center column</div> 
<div id="right">this is the right column</div> 
<div id="footer">this is the footer</div> 
</div> 
</div> 

</body>

出典

2009-08-18 user158820

は、列が互いに横に並んされていない理由です。マージン：0自動車も物事を助けていない。浮動列のルールは、お互いの横に必要なすべての要素幅の合計が< =それらのコンテナの幅であることを確認することです。あなたはすべての列をフロートとフッターと、クリアしたら、あなたはビジネスであるべき

220 + 220 + 400 < 900

：ので、あなたのケースでは、あなたは大丈夫でしょう。また、名前に基づいてフッターの背景イメージがどのように繰り返されているかを変更しました（これは、水平にタイルを貼りたい薄いスライスであると仮定しています）。

#footer{ 
    clear: both; 
    text-align: left; 
    height: 28px; 
    background: url(../slices/images/footerslice.jpg) repeat-x top left; 
} 

#left, #right, #center { 
    text-align: left; 
    height: 752px; 
    width: 220px; 
} 

#left { 
    float: left; 
} 

#right { 
    float: right; 
} 

#center{ 
    float: left; 
    width: 400px; 
}

出典

2009-08-19 00:00:31 Pat

私はJoomlaの経験がないと私のCSSの知識が本当の答えを供給するために、粗にですが、あなたが働いてマルチコラムレイアウトをしたい場合、あなたは間違いなくYAML（ないYAML言語、thatsのを見てみる必要があります別物）。おそらく、あなたは自分のCSSをパートキーにすることも全体としてすることもできます。あなたができない場合でも、彼らのdocumentationは非常に説明的で、複数の列のレイアウトに関連する注意点について多くのことを教えてくれます。

出典

2009-08-19 00:10:08

divに正しく整列する3列

答えて

関連する問題