Love the title a lot!
Anyway yes the above is what I am attempting to achieve but not having much luck. I dont want to float the inner left and right as I want the content inside them to be centred. I want them to be constrained to the inner containers boundries too. Got close by adding a clearing div but not quite happening still. I saw mentions of overflow:hidden fixing this, they lied!
Here is the html:
CSS:
Anyway yes the above is what I am attempting to achieve but not having much luck. I dont want to float the inner left and right as I want the content inside them to be centred. I want them to be constrained to the inner containers boundries too. Got close by adding a clearing div but not quite happening still. I saw mentions of overflow:hidden fixing this, they lied!
Here is the html:
Code:
<div id="outer-container">
<div id="inner-container">
<div id="header">
</div> <!--end header-->
<div id="inner-left">
</div> <!--end inner-left-->
<div id="inner-right">
</div> <!--end inner-right-->
</div> <!--end inner-container-->
</div> <!--end outer-container-->CSS:
Code:
#outer-container {
width:950px;
margin:0 auto;
overflow:hidden;
border:solid 1px red;
}
#inner-container {
width:771px;
margin:0 auto;
overflow:hidden;
min-height:800px;
border:solid 1px yellow;
}
#inner-left {
width:305px;
margin:0 auto;
overflow:hidden;
min-height:800px;
border:solid 1px purple;
}
#inner-right {
width:305px;
margin:0 auto;
overflow:hidden;
min-height:800px;
border:solid 1px green;
}