Forum Moderators: not2easy
I have a decent grasp on CSS and have been able to use it fairly successfully for horizontal liquid layouts. However, what about vertical liquidity?
Let's say I have a layout with a top banner that's 100px in height, and below that I have a left menu column. I want that left menu column to touch the bottom of the browser window all the time, so I set the height of it to 100%. Of course that doesn't work, because it makes the page 100%+100px high, which causes the page to scroll even if the content doesn't warrant scrolling.
To further complicate things, I'd like for the left menu column to touch the bottom of the page regardless of how long the page is. So if the page is 5 pages in length, I want the menubar to be five pages tall and match the height of the content.
In other words, I want the menu column to be a minimum of 100% of the browser window on short pages, or match the height of the content on large pages.
Of course I'd rather use CSS than tables for this, but tables seem to be so much easier for pulling stuff like this off. Am I wrong? Any tips or advice would be appreciated.
img.banner {
height : 10%;
}
#menu {
height : 90%;
}
Otherwise, I have no idea except to use tables, sorry... =/
DIV.menu {
width: 25%;
float: left;
}
DIV.main {
width: 100%;
margin-left: 25%;
}
This places the menu at the left and takes up 25% of the screen and the main content area begins at 25% of the screen. This way the main content area is not allowed to intrude on your menu area.
hope this helps.
[webmasterworld.com...]
Only catch is it won't work in IE, but check out the URL in the 10th post for a workaround.
Here is a possible solution:
<style type="text/css">
html, body { min-height: 100%; height: 100%; width: 99.9%; padding: 0px; margin: 0px; border: 0px; }
#tab {
min-height: 100%;
max-height: 100%;
height: 100%;
width: 100%;
padding: 1px;
border: 0px;
margin: 0px;
display: table;
}
#banner-row {
height: 100px;
width: 100%;
padding: 0px;
border: 0px;
margin: 0px;
display: table-row;
}
#banner {
height: 100px;
width: 100%;
padding: 0px;
border: 0px;
margin: 0px;
background: gray;
color: white;
}
#content-wrap {
height: 100%;
width: 100%;
border: 1px dashed black;
display: block;
}
#content-row {
height: 100%;
width: 100%;
padding: 0px;
border: 0px;
margin: 0px;
display: table-row;
}
#menubar {
width: 150px;
height: 100%;
padding: 2px;
border-right: 1px solid blue;
margin-right: 5px;
text-align: center;
float: left;
display: block;
background: purple;
color: white;
}
#content {
width: 100%;
height: 100%;
padding: 2px;
display: block;
background: orange;
color: white;
}
.text {
font: 13px Geogria,Times New Roman,Arial,Tahoma,Sans-Serif;
display: block;
}
a { color: white; text-decoration: none; font-weight: none; font-width: none; font-style: none; }
a:hover { color: yellow; text-decoration: none; font-style: italic; }
a:active { color: yellow; text-decoration: none; font-style: italic; font-weight: bold; font-width: bold; }
body { font: 14px Verdana,Tahoma,Microsoft Sans Serif,Sans-Serif; }
h1 { font: 16px Verdana,Tahoma,Microsoft Sans Serif,Sans-Serif; font-style: italic; font-weight: bold; font-width: bold; padding: 0.5px; margin: 0px;}
</style>
<div id="tab">
<div id="banner-row">
<div id="banner">
<img src="banner.png" alt="Banner Image" height="100px" width="100%"/>
</div>
</div>
<div id="content-wrap">
<div id="content-row">
<div id="menubar">
<h1>Menu Links</h1>
<a href="http://some.where/some/place/">Link</a><br />
<a href="http://some.where/some/place/">Link</a><br />
<a href="http://some.where/some/place/">Link</a><br />
<a href="http://some.where/some/place/">Link</a><br />
</div>
<div id="content">
<span class="text">
Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content. Content, content, more content.
</span>
</div>
</div>
</div>
</div>
Jordan
[edited by: MonkeeSage at 12:59 am (utc) on Aug. 10, 2003]
piksie, unless I'm doing something wrong, setting a body height does not help. If you're setting a child to be 100% of the height of the parent and there's another child set to be 100px, the result is still that the combination of the two children will require you to scroll that 100px that the content spills over.
MonkeeSage, I copied and pasted your code (adding head and body tags where appropriate) and the menu column was not stretching to the bottom of the page in any browser I tested it on.
Try it using a strict DTD. IE6 expands both columns, NN6 doesn't seem to. But in either, if you have 5 pages of links in the column, the column will now be 5 pages long and the content column will be the same height. Both columns are fluid as well (notice the text reflow on resize). Best I could do. :)
Jordan
I forgot a few semicolens and other formatting. Seems that I forgot to change the code before I posted (I was editing as I played with it and never did the last update before I hit submit I guess). It should should work for strict or quirks (transit.) now. I'll edit my other post to reflect the changes, sorry about that.
Jordan
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3c.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
And I've tried no DTD at all. A couple of these got pretty close, but they required scrolling even if the page content didn't warrant it. Is that how it's intended to appear? I'd prefer no scrolling if the page is short.
<html>
<head>
<style>
body {
height:100%
margin:0;
padding:0;
}
topbar {
height:100%;
}
menubar {
position:absolute;
top:0;
left:0;
height:100%
padding:100px;
}
</style>
</head>
<body>
<div class="topbar"></div>
<div class="menubar"></div>
</body>
</html>
The padding:100px; basically moves the manubar under the top 100px height bar, but keeps the menu content below at the right start height, while allowing you to give the menubar a proper 100% height touching the browser edges.
SN
ANYWAY, the best solution I have thus far is using a combination of CSS and JavaScript. I am not terribly talented with JavaScript, so the current version only works for IE.
For those who are curious, you can check it out at:
[richarddoyle.net...]
SN
