Tue, 2004-04-20 16:24
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!
Tue, 2004-04-20 17:26
#1
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.