Forum Moderators: not2easy
title
m text
e text
n text
u text
footer
The above diagram shows the basic shape of my latest web page design. But I have one very annoying problem and can't seem to find the code. How can I have the menu div tag stretch to connect to the footer div WITHOUT the use of a numerical value (automation) according to the pages content? I am currently using the "guess and check" method to get the correct length. Any help would be appreciated.
Good luck,
:)
Im sure there is a way to stretch your menu DIV, but the method depends on what CSS-p (positioning) techinque you are using. If your menu div is floating, you can add a clearing div to stretch your menu div.
There is a famous technique called faux columns by Dan Cederholm [simplebits.com]. You can read about it at A list apart.
Please post some of your code here and I will try to help you.
<snip>
You may have to view the source code on the txt document. My computer wanted to turn it into an html document anyways. Thank you again for you help.
[edited by: DrDoc at 5:30 am (utc) on April 28, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]
Please dont post url's in here, the admin will probably delete them soon. Its better if you post the raw code in your message.
The faux columns idea would work great for you, just make a 10px high image that looks like the menu background with a 150px width. Then add a wrapping div around your sidebar div and content div. Apply the background image to your wrapping div like:
#wrap {
background: transparent url(path/to/image.gif) repeat-y 0 0;
}
/* change the values after repeat-y to position your background image properly */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 180px;
}
<body>
<div id="wrap">
<div id="menu"></div>
<div id="content"></div>
<div style="clear:both;"></div> <!-- stretches the wrapping div -->
</div>
</body>
I hope this helps.
Another trick would be to add a 150px wide border-left to your content div, faking it to be the background of your menu. But then you would not be able to use borders like you do now.
david
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled 04.21.04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
body{margin:0;padding:0;background:#888;font:1em bold Verdana,sans-serif;}
div{position:relative;margin:0 auto;padding:0;text-align:center;}
</style>
</head>
<body>
<div style="background:#FEE;height:12%;">
Title text
</div>
<div style="height:60%;">
<div style="float:left;background:#EFE;height:100%;width:20%;">
Menu
</div>
<div style="float:left;background:#FFE;height:100%;width:80%;text-align:left;overflow:auto;">
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
<p>
Text ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum, ad infinitum,
</p>
</div>
</div>
<div style="background:#EFE;height:12%;">
Footer text
</div>
</body>
</html>
1) Set a javascript variable to the height of the content.
2) Use that variable to set the height of the menu.
3) Add and subtract pixels to compensate for the lost margins. (Or just change the margins' values!)
I hope this will work and help other who may not find any of the other possibilities (Which I thought were great but don't suit what I want exactly) suiting.
Thanks everyone!
I dug up some code that should help you out. Let me know if it does the trick.
---------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>X</title>
<script language="Javascript">
function UpdateSizes()
{
var winheight = (document.all)? document.body.clientHeight : window.innerHeight;
document.getElementById('contdiv').style.height = winheight-56;
var winwidth = (document.all)? document.body.clientWidth : document.body.clientWidth+20;
document.getElementById('contdiv').style.width = winwidth;
document.getElementById('bottomtbl').style.width = winwidth;
document.getElementById('topdiv').style.width = winwidth;
}
</script>
</head>
<body onload="Javascript:UpdateSizes();" onresize="Javascript:UpdateSizes();">
<div id="topdiv" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 28px; background-color: blue;"></div>
<div id="contdiv" style="overflow: auto; position: absolute; top: 28px; left: 0px; background-color: yellow;">
menu content
</div>
<div id="bottomtbl" style="width: 100%; height: 28px; position: absolute; left: 0px; bottom: 0px; background-color: red; "></div>
</body>
</html>
------------------------------------------
SS
