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;
}
お礼
なるほど、理解しました。 ありがとうございます。 そして手元で悩んでいた問題には user agent stylesheet も絡んでいました。謎がクリアになりスッキリです！