Two divs and the old 100% height problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

joshthomas99@yahoo.co.uk - 27 Jan 2007 13:16 GMT

Hello,

Yes, I've spent hours reading through all the old postings and
searched
the net - but couldnt find a solution to the 100% height problem with
nested divs.

Basically I want the first box to be 250px high, and the one below it
to take up the rest of the browser window. I have a big div around the
lot (set to 100% height), and thought that the bottom div would fill
it up without stretching it - yet it stretches.

My code (For IE) is as follows:

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

div.whole {
width:100%;
height: 100%;
border:3px solid green;
}

div.topbar {
height:250px;
width:100%;}

div.lower {
border:5px solid red;
height: 100%;
}

</style>
</head>
<body>

<div class="whole">

<div class="topbar">Top bar for logo</div>
<div class="lower">Main</div>

</div>

</body>
</html>

Thanks loads, Josh

Reply to this Message

joshthomas99@yahoo.co.uk - 27 Jan 2007 14:55 GMT

Fixed it myself, here's the code for anyone else with the same
problem:

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

html body {
margin:250px 0 0 0;
padding: 0;
overflow:hidden;
}

html #top {
position: absolute;
top: 0;
width:100%;
height: 250px;
border: 5px solid red;
}

html .content {
top:180px;
border: 5px solid green;
overflow:auto;
height:100%;
}
</style>
</head>

<body>
<div id="top">Header</div>
<div class="content">Main content</div>

</body>
</html>

On Jan 27, 1:16 pm, joshthoma...@yahoo.co.uk wrote:

> Hello,
>
[quoted text clipped - 39 lines]
>
> Thanks loads,Josh

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2007

Two divs and the old 100% height problem