mixing % values and px values

[lomokev]

i have a simple layout i am trying to achieve where i have a menu on the left, logo that goes across the top of the page and area under the logo where content goes and if it over flows it will scroll vertically and horzontaly

you can see a simplified version here (sorry about the colors i just mashed it together quite quickly):

http://www.thehopeandanchor.net/temp/css_test.php

the problem i haveing is that i want the right_logo to be 83px height but the DIV below i have told it to be 100% but its taking the 100% of the hight of the browser window and not the space available to it. the only time i ever want to see scroll bars is when the content over flows the right_content DIV


*
{
margin: 0; padding: 0;
}

html, body
{
font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
background-color: #FFFFFF;
height: 100%;
color: #000000;
}


.left_sidebar {
float: left;
width: 230px;
height: 100%;
background-color: #FF00FF;
}

.right_logo
{
width: auto;
height: 83px;
overflow:hidden;
background-color: #0000FF;
color: #000000;
}

.right_content
{
width: auto;
height: 100%;
overflow: auto;
background-color: #00FFFF;
color: #000000;
}
-->
</style>



<div class="left_sidebar">
MENU
</div>

<div class="right_logo">
LOGO
</div>

<div class="right_content">
RIGHT CONTET
</div>

[Centauri]

When something is set to height 100%, it means 100% of a parent that has a height implicitly set. The parent of the right content is the body, which has no height set. The parent of the body is the html, which also has no height set. Therefore the screen height is what the 100% is referenced to.

I would suggest putting the right logo div within the right content div.

[lomokev]

that would work but the logo can't be scroled it needs to stay in the same position all the time

[Centauri]

Well in that case, use a background colour or image on the body and transparent background on content to make it look like the content container is full height (faux column style).