First of all you can check this website: link text

What I'm trying to achieve is simple. I have 3 vertical DIV's with the id #left_col and #right_col with a gradient background, and #main with black background. I can't get them to 100% full height.

Any tips to achieve 100% height on the 3 columns?

2 answers

Ktash 1851
This was chosen as the best answer

What you're actually looking for is a gradient background to fill a shadow, and trying to implement it using a three column layout is probably more work than you need. The easiest way for you, since you have a fixed width on your content, is to just create an image that is as wide as you need for your page plus the gradient, put your gradient on that, and then set it to repeat. Not only is this good semantically, its also easier to implement.

If you are, for some reason or another, stuck on using a 3 column layout to solve this issue, then you can check out the links from this question/answer and get some good techniques for getting 3 columns. A simple way based on what you've got is to remove the float on the main content, move the right column to before the content, and float it right, then set position relative on the wrapper and mess around with either floats, or switch to absolute positioning. I was able to get it working in Firebug via absolute positioning, and changing the width of the wrapper to 951px.

Answered over 8 years ago by Ktash
  • I was actually thinking on doing that, was hoping on doing just a few changes on the css and get it to work, but I'll go for the option 1. thanks Rui Santos over 8 years ago
aryana 0

Try this in your CSS:

   html, body {height:100%;}

   #main, #left_col, #right_col {height:100%;}
Answered over 8 years ago by aryana