0

The problem: (http://i.imgur.com/mU5HBoa.png) enter image description here

As you can see in the image above the mainContent floats just below the actual top op the browser view port, i cant make it stick to the top and stay centered at the same time.

Also a quick side question, how do i get the #mainContent, .rightContentBorder and .leftContentBorder to get their height from the #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;
}

The HTML

<body>
<div id="contentBox">
        <div class="leftContentBorder"></div>
        <div class="rightContentBorder"></div>
        <div id="mainContent">
            test
        </div>
    </div>
</body>
4

3 回答 3

1

像这样进行基本的CSS重置：

* {
margin:0;
padding:0;
}

这将删除所有元素上的默认填充边距。

于 2013-07-31T16:46:48.277 回答
1

您是否尝试过在 CSS 中设置正文和 html 边距/填充？

html, body {
  padding:0;
  margin:0; }

至于让 div 获取其父 div 的高度。您可以将 div 设置为 height:100%; 但是，如果父 div 没有设定高度，那将毫无意义。你的父 div 有 height:auto 所以它不会工作。

于 2013-07-31T16:44:04.080 回答
0 
body {
    margin:0;
    padding:0;
}

我不会真正触摸父 html。如果主体规则失败，最好的猜测是沿途设置的不同值。如果一切都失败了，您可以使用定位并将其设为绝对。不过，为头痛做好准备。

于 2013-07-31T17:06:41.223 回答