Take a look at
this page in FireFox:
Note the position of both sidebars is affected by the top margin of the MainContent div. Even though they are outside of mainContent!
Code:
<body class="thrColFix">
<div id="container">
<div id="sidebar1"></div>
<div id="sidebar2"></div>
<div id="mainContent"></div>
</div>
</body>
</html>
The solution is on
this page. By placing a clearing element at the top of container, things work as they should.
Code:
<body class="thrColFix">
<div id="container">
<br class="clearfloat" />
<div id="sidebar1"></div>
<div id="sidebar2"></div>
<div id="mainContent"></div>
</div>
</body>
</html>
One last bit of weirdness, putting a border around container will fix the problem without using the clearing element.
The CSS for both is
Code:
@charset "UTF-8";
body {
background: #2F2C2D;
margin: 0;
padding: 0;
text-align: center;
}
.thrColFix #container {
width: 960px;
margin: 0px auto;
Position: relative;
}
.thrColFix #sidebar1 {
left: 0px;
top: 25px;
position: absolute;
height: 330px;
width: 330px;
background: #CCC;
}
.thrColFix #sidebar2 {
float: right;
width: 180px;
margin-top: 260px;
height: 300px;
background: #999;
}
.thrColFix #mainContent {
margin: 90px 180px 0px 275px;
background: #FFF;
position: relative;
height: 600px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Am I missing something here or is this just your regular everyday CSS insanity.
06-10-2009, 04:53 PM
CSS Puzzle: I have the answer, just don't know the question!
Threaded Mode
