1 reply [Last post]
lau22
Offline
newbie
Stoke on Trent UK
Last seen: 17 years 45 weeks ago
Stoke on Trent UK
Joined: 2004-03-16
Posts: 1
Points: 0

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!

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 52 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.