...

View Full Version : 100% height fluid layout horizontal division problem



mjsw
12-09-2010, 08:58 PM
Hi all,

I have a question regarding fluid layouts in HTML/CSS. I want to achive a simple 100% height, 100% width layout that divides the screen horizontally into 3 parts. First part (placed on top) should have height defined in px's. The last part (on bottom) should also be measured in px. The middle should be at least 100% height of the body minus the height of the top and bottom parts (measured in px!), with the ability to grow in height. I've already found the solution with one big div with negative margins and placeholder for footer, but this only makes this layout looks like it should, but it isn't it. In other words, I still can't define the middle div to have the proper height (100% of the body - size of header and footer measured in px's). I need this div to apply background images to it.

Here is complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
div#Layout { display:block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin:15px; background-color:transparent; }
div#Container { height:100%; height:auto !important; min-height:100%; margin-bottom:-39px; background-color:silver; }
div#Header { height:71px; background-color:gold; }
div#Body { margin:0; overflow:hidden; background-color:green; }
div#FooterPlaceholder { height:39px; }
div#Footer { height:39px; background-color:navy; }
</style>
</head>
<body>
<div id="Layout">
<div id="Container">
<div id="Header">
head here
</div>

<div id="Body">
body here
</div>

<div id="FooterPlaceholder">
</div>
</div>
<div id="Footer">
footer here
</div>
</div>
</body>
</html>


as you see, the silver color is everywhere, even under header and footer so when I apply background image, it will interfere with the images of the header and footer. That's why I need the middle div which I can't define myself...

If anyone can point me the right solution I will be greatfull,
thanks!

philstricker
12-10-2010, 09:57 AM
Let me know if this works! (Adjust #Body top and bottom based on #Header and #Footer heights.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% height fluid layout horizontal division problem</title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
div#Header
{
height: 71px;
background-color: gold;
}
div#Body
{
position: absolute;
top: 71px;
right: 0px;
bottom: 39px;
left: 0px;
overflow: hidden;
background-color: green;
}
div#Footer
{
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 39px;
background-color: navy;
}
</style>
</head>
<body>
<div id="Header">
head here
</div>
<div id="Body">
body here
</div>
<div id="Footer">
footer here
</div>
</body>
</html>

abduraooft
12-10-2010, 11:22 AM
Like http://bonrouge.com/2c-hf-fluid.php ?

mjsw
12-10-2010, 02:23 PM
Like http://bonrouge.com/2c-hf-fluid.php ?

Sorry but not really what I'm looking for. The main content in that example has height of its content, not height of the remaining space between header and footer.

I want to have one container (a div) divided horizontaly by 3 other divs (header, content and footer). Header and footer have known height in pxs while third should be automatically stretched to fill the container. Something like on this picture:

http://img822.imageshack.us/img822/4968/layoutl.png

I have left big margins on this picture so you can see the container, but the idea is to have whole silver color filled by other divs.

mjsw
12-10-2010, 03:59 PM
OK, I've found the solution. I'm now using table layout with divs and css (display:table, display:table-row, display:table-cell) etc, as tables allows height stretching (and blocks not)... I only wonder what are the downsides of such approach?

Excavator
12-10-2010, 04:08 PM
Hello mjsw,
See the link about tables in my signature line. It discusses the downsides a bit.

The plus side would be that you now have a working example to show us. Link us to the test site that has your tabled layout working the way you want, that may be easier to understand than your description.

mjsw
12-10-2010, 04:48 PM
Hello mjsw,
See the link about tables in my signature line. It discusses the downsides a bit.

The plus side would be that you now have a working example to show us. Link us to the test site that has your tabled layout working the way you want, that may be easier to understand than your description.



I can't put a test page yet, here is the code that works now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html
{
height:100%;
}
body
{
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
font-family:arial, serif;
}
#layout
{
background-color:white;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:10px;
}
#kontener
{
display:table;
width:100%;
min-height:100%;
padding:0;
margin:0;
background-color:#ededed;
}
#header
{
display:table-row;
background-color:gold;
}
#header-content
{
display:table-cell;
height:71px;
}
#content
{
display:table-row;
background-color:red;
}
#content-content
{
display:table-cell;
}
#footer
{
display:table-row;
background-color:blue;
}
#footer-content
{
display:table-cell;
height:39px;
}

</style>
</head>
<body>
<div id="layout">
<div id="kontener">
<div id="header">
<div id="header-content">
</div>
</div>
<div id="content">
<div id="content-content">
</div>
</div>
<div id="footer">
<div id="footer-content">
</div>
</div>
</div>
</div>
</body>
</html>


If anyone can make the same effect without using display:table I will appriciate sharing with me...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum