Hi,
I want to create a page with a column down the left, one in the middle and one down the right hand side, with the central column being the widest. I have used three div's with the following attributes:
#container1 {
float: left;
background-color: #9cf;
width: 166px;
height: 600px;
background-image: url(images/navbg.gif);
}
#container2 {
float: left;
background-color: #fff;
width: 60%;
height: 600px;
padding: 20px;
}
#container3 {
float: right;
background-color: #9cf;
width: 166px;
height: 600px;
}
I am new to this so it may all be horribly wrong!! Basically at 1024 screen resolution it is fine in IE and Mozilla but when I go down to 800 x 600 the right hand column wraps underneath the central column.
Any Ideas?? Hope this makes sense!
Page positioning
It'll do that because:
width of central column = 60% of 800 pixels = 480
480 + 166 + 166 = 812 which is too big, so it'll wrap.
There are many links around with good basic three-column layouts; I would do the following:
Note that the order of the columns changes!
#container1 { float: left; background-color: #9cf; width: 166px; height: 600px; background-image: url(images/navbg.gif); } #container2 { float: right; background-color: #9cf; width: 166px; height: 600px; } #container3 { background-color: #fff; margin-left : 170px; margin-right : 170px; height: 600px; padding: 20px; }
So the HTML may be :
<div id="container1">Left stuff</div> <div id="container2">Right stuff</div> <div id="container3">Middle stuff</div>
Hope that helps.