cssで3カラムを実現したいのですが・・・
cssで3カラムを実現したいのですが、左メニューがカラム落ちします。
素人なので、あるサイトを見本にした所、左メニューがカラム落ちしてしまいます。
原因がわかりませんので、わかる方どうか助けてください。
-------html---------
<body>
<div id="page">
<div id="header">
<div class="inner">
<p>#header</p>
</div>
<!-- / #header--></div>
<div id="container">
<div id="contents">
<div id="main">
<div class="inner">
<h2>#main</h2>
<p>メイン</p>
<p>testてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
<p>testてすとテスト</p>
</div>
<!-- / #main--></div>
<div id="sub">
<div class="inner">
<h2>#sub</h2>
</div>
<!-- / #sub--></div>
<!-- / #contents--></div>
<div id="ex">
<div class="inner">
<h2>#ex</h2>
</div>
<!-- / #footer--></div>
<!-- / #container--></div>
<div id="footer">
<div class="inner">
<h2>#footer</h2>
</div>
<!-- / #footer--></div>
<!-- / #page--></div>
</body>
</html>
-------css---------
body {
margin:30px 0 0 0;
background:#EEE;
color:#000;
line-height:1.5;
text-align:center;
font-size:small;
font-family:verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
*:first-child + html body {
font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
html {
overflow-y:scroll;
}
h1,h2,h3,h4,h5,h6 {
font-size:medium;
letter-spacing:.1em;
}
p {
margin:0 0 10px;
}
img,fieldset {
border:0;
}
.inner {
padding:10px;
}
/* by */
.by {
position:absolute;
bottom:10px;
right:10px;
margin:0;
padding:5px;
background:#FFF;
}
/*-----------------------------------------------
__page
-----------------------------------------------*/
#page {
width:90%;
min-width:600px;
margin:0 auto;
text-align:left;
}
/*-----------------------------------------------
__header
-----------------------------------------------*/
#header {
background:#000;
color:#FFF;
}
/*-----------------------------------------------
__container
-----------------------------------------------*/
#container {
float:left;
width:100%;
background:#999999;
}
/*-----------------------------------------------
__contents
-----------------------------------------------*/
#contents {
}
/* __main
------------------------------------------*/
#main {
float:left;
width:100%;
}
#main .inner {
margin:0 200px 0 180px;
background:#FFF;
}
/* __sub
------------------------------------------*/
#sub {
float:left;
width:150px;
margin-left:-200px;
background:#009999;
}
/* __ex
------------------------------------------*/
#ex {
float:left;
width:150px;
margin-left:-100%;
background:#CCCC00;
}
/*-----------------------------------------------
__footer
-----------------------------------------------*/
#footer {
clear:both;
background:#000;
color:#FFF;
}
お礼
いろいろ言われてみて思い当るところがいくつかありました。 float で位置を指定してサイトを構築していくのは初心者には不向きだったようです。 よって、今回は table を使ってがんばることにしました。 見て下さってありがとうございます。