Forum Moderators: not2easy
This might be very simple question, but for some reason it is a stumbling block for me.
I have two divs, and I want both of them to have the same height - 100% of the screen.
i want them to be just like two colomns of the table, which extends to 100% of the screen. If one colomn is filled with content, the second has to be the same height even if it is empty.
But how can I achieve the same result using css?
I thought that all I need was to set [body] height to 100%, and also set height of both divs to 100%.
But it only makes them to be 100% of the screen before I scroll it down. when one div is more long (with a lot of content inside) and a vertical scrollbar appears in a browser, the second div remains the same size and after I scroll my page down it is an empty space under it!
code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html">
<style type="text/css">
<!--
body {
height: 100%
}
.right {
position:absolute;
height: 100%;
width: 200px;
left: 500px;
top: 0px;
background-color: red
}
.left {
position:absolute;
height: 100%;
width: 170px ;
left: 0px;
top: 0px;
background-color: blue
}
-->
</style>
</head><body bgcolor="#FFFFFF">
<div id-left class=left>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
<p>content that is too much</p>
</div><div id=right class=right>
<p>a little content</p>
</div>
</body>
</html>
how to make red box the same size as blue? without using a table?
but I am not sure that it is good method, and how "crossbrowser" is it.
And I still hope to solve problem with css/html adjusting.
2, 3, Multi Column CSS Templates and Layouts [webmasterworld.com] in the forum library has a good selection of examples, and the one entitled "2 Column, 100% height, with Header and Footer" could be modified for your purpose.
Otherwise there are multiple example sites that will show up in a search.
