CSS Using 100% height DIV

Hi,

just started out trying CSS instead of tables for layout. But ran into a little problem, hope one of you can help. My goal is, to make a 3-column style page, but I want the left column (using a colored background) to be 100% heigth.

Code:

<html>
<head>
<style type="text/css">

html, body {
height: 100%;
}

body {      
margin: 70px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #FEF8F1;
}

#left {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border: 0px;
background: #F0A505;
width: 306px;
height:100%;
}

#middle {
margin: 0px 180px 70px 320px;
padding: 0px;
border: 0px;
}
      
#right {
position: absolute;
top: 50px;
right: 0px;
margin: 20px;
padding: 10px;
border: 2px solid #ccc;
background: #FFFFFF;
width: 150px;
}
</style>

<title>3 Column layout</title>
</head>
<body>

<div id="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

<div id="middle"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>

<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

</body>
</html>

So far so good. But if I insert more text in the middle column, a scrollbar appears and when I scroll down, the left column background-color ends. It looks like, the 100% heigth only applies at the initial viewable area of the browser.

Anyone knows the answer to this *small* cosmetic problem?

Thanx,

DM
Darq_MessiahAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:
Unfortunately, height: 100% is not 'valid'.

100% is a relative reference - it means, the height of this thing is 100% of the height of it's parent thing.  The only way 100% height becomes valid is if the height of the parent thing is absolutely set (600px, for example).  There are ways around this, however.

My favorite resource for this problem lies here: http://www.alistapart.com/articles/fauxcolumns/

And, to save COBOLdinosaur some time, he'd like you to look here: http://webhost.bridgew.edu/etribou/layouts/skidoo/demos/three_left.html

Hope this helps :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
lol good link :^)

The height of an element can be forced to the height of the page with scripting.


In the head of the page:

<script type="text/javascript">
function resetHgt()
{
   H-=document.getElementById('left').offsetTop+document.body.scrollHeight
   document.getElementById('left').style.height=H+'px';
}
onload=resetHGT;
onresize=resetHGT;
</script>

Cd&

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.