2 replies [Last post]
jtulip22
Offline
newbie
quebec
Last seen: 15 years 47 weeks ago
quebec
Joined: 2006-07-03
Posts: 4
Points: 0

Hi,

I got a problem with my layout. I have a simple 2 columns layout, except that the left column height is 100% of my container div height.

My "header" div and my "main content" div are both to the right of the left column.

I have tried to use a clearing method to achieve that, but my layout becomes messed up.

Please have a look at http://www.sas.ulaval.ca/temp/almostworking.html

The navy column must be 100% of the height, and there must be no extra space above my header.

Any ideas ?

Thanks for your help,

Jtulip22

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 columns layout problems

west needs to be floated left.

If you don't specify the height of container, you can't get a child element to match its height. However, there are several methods by which you can get a container to surround a float (searching these forums or with google will give good explanations). There are also a couple of methods by which you can get multi-column backgrounds to extend to the height of the tallest column (google on faux-columns, equal height columns).

If by no spacing above your header, you mean above the top border, control your margins on the body and html elements.

You'll find some good links on two column and three column layouts (drop a column to turn three into two) at http://css-discuss.incutio.com

jtulip22
Offline
newbie
quebec
Last seen: 15 years 47 weeks ago
quebec
Joined: 2006-07-03
Posts: 4
Points: 0

2 columns layout problems

Works perfect. Laughing out loud

I meant "below", not above, but it's all fine. I will get rid of having my left column height to 100% by setting a hard coded px value for its height and chosing the right background color for the subcontainer.

Thanks a lot!