Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Layout / Xhtml

How To Build This Layout With Css?

Post a Comment
I'm not new at CSS, but this is problem for me and I can't solve it. I need to build layout as below: Divs that are at the bottom and at the top have fixed heights. The one in th

Solution 1:

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>

Solution 2:

This will help you center divs vertically and horizontally

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

Solution 3:

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.

Solution 4:

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><divid="top"></div><divid="middle"></div><divid="bottom"></div></body></html>

Post a Comment for "How To Build This Layout With Css?"