問題: ( http://i.imgur.com/mU5HBoa.png )
上の画像でわかるように、mainContent はブラウザー ビュー ポートの実際の上部のすぐ下に浮かんでいます。
また、簡単な補足質問ですが、#mainContent、.rightContentBorder、および .leftContentBorder を取得して #contentBox ID から高さを取得するにはどうすればよいですか?
body {
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/BG_pattern.png);
background-repeat:repeat;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
text-align:left;
}
li {
text-align:left;
}
#contentBox {
margin: 1px auto 1px auto;
width:786px;
height:auto;
min-height:700px;
max-height:none;
}
.leftContentBorder {
width:27px;
height:700px;
float:left;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Leftside_orangebar1px.png);
background-repeat:repeat-y;
}
.rightContentBorder {
width:27px;
height:700px;
float:right;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Rightside_orangebar1px.png);
background-repeat:repeat-y;
}
#mainContent {
margin: 0 auto 0 auto;
width:732px;
height:700px;
background-color:#CCC;
}
HTML
<body>
<div id="contentBox">
<div class="leftContentBorder"></div>
<div class="rightContentBorder"></div>
<div id="mainContent">
test
</div>
</div>
</body>