[SOLVED] how to make div the full height of the screen

[M.O.S. Studios]

here is the problem,

<div class='left'> and <div class='right'>

are placed next to each other within <div class='center'>

<div class='right'> is the content and the height varies from page to page

i want the length of <div class='left'> to always match <div class='right'>

 

any one have any ideas?

 

the css

.center {
width:900px;
background-color: #FFFFFF;
text-align: left;
vertical-align: top;
        border: 1px solid #000000;
}

.left{
float: left;
width: 20%;
background-color: #ffffff;
}
.right{
float: right;
width: 80%;
background-color: #ffffff;
text-align: left;
vertical-align: top;
}

 

the html

<div class='center'>
<div class='left'><div>
<div class='right'></div>
</div>

 

Thanks in advance

[ldougherty]

Set the left and right class to a particular pixel or percentage?  I know you can set the div to be the entire page height just by saying height:100%

[M.O.S. Studios]

that didn't work, i figured it out.

 

css

.center {
width:900px;
background-color: #FFFFFF;
text-align: left;
vertical-align: top;
        border: 1px solid #000000;
}

.left{
float: left;
width: 100%;
background-color: #ffffff;
}
.right{
float: right;
width: 80%;
background-color: #ffffff;
text-align: left;
vertical-align: top;
}

 

html

<div class='center'>
        <div class='left'>

        <div class='right'></div>
        </div>
</div>