ansaurus

Question

Answer 1

+8 A:

I believe you want something like this

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>

John Hartsock 2010-07-27 14:49:19

Great solution, thank you Mr. John Hartsock...

ŁukaszW.pl 2010-07-27 14:55:38

No problem. I use this layout all the time. Its flexible and easy to use. No javascript, just pure html and CSS. you can also use the same technique to split content into two creating a left navigation menu

John Hartsock 2010-07-27 14:58:28

Answer 2

+2 A:

Using jQuery to set DIV2's height on window resize:

var $div1 = $('#DIV1'),
    $div2 = $('#DIV2'),
    $div3 = $('#DIV3'),
    $window = $(window);

$window.resize(function ()
{
    $div2.height($window.height() - ($div1.height() + $div3.height()));
});

is another option I've used.

Matt Ball 2010-07-27 14:53:11

Aaaa.. some js solution, nice.. thanks for help...

ŁukaszW.pl 2010-07-27 14:58:15

Answer 3

+4 A:

This will help you center divs vertically and horizontally

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Catfish 2010-07-27 14:53:11

Very good link, thanks.. Will be helpfull...

ŁukaszW.pl 2010-07-27 14:57:20

Answer 4

A:

I'm not sure if i understand exactly what you ask. But what about this.

<html>
<head>
<style>
body {
    margin : 0
}

#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    border: solid 1px black
}
#middle
{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    width: 100%;
    overflow: auto;
    border: solid 1px green;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border: solid 1px blue;
}

</style>

</head>
<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</body>
</html>

Jonnio 2010-07-27 15:02:39

ansaurus

tags:

views:

answers:

How to build this layout with CSS?

related questions