Forum Moderators: open
Very basic question I am sure, but from a bit of research I cannot find a satisfactory and simple answer, to what seems to me should be a fundamentally simple thing to do.
Simple page layout, one div down the lefthand side as a navigation menu, the rest of the page to the right, blank space for content.
My layout works as I want it EXCEPT for kind of 1.5 things.
Just looking at the code below (in a browser) the menu bar is spilling/forcing the page to overflow at the bottom when there is no need. There seems to be a chunk of white space underneath the menu which I can't get rid of. This also causes the scroll bars to appears on browser.
Secondly, and related to this, when you uncomment the extra paragraphs in the code, the text now is long and (if you have enough of them) passes below the menu, extending the page as much as it needs, BUT the menu does not go with it...its as if the menu has a fixed height, even though I am telling it to be 100% height.
I'm sure I am making some basic coding mistakes...
Hope someone can help.
Thanks in advance,
Jon
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="jcrstyle.css" ><style>
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin:0;
padding:0;
height:100%;
background:00000f;
}h1
{
color: #000066;
font-size: 2em;
}h2
{
color: #000066;
font-size: 1.6em;
}h3, h4, h5, h6
{
color: #000066;
font-size: 1.2em;
}#container
{
height:100%
}#leftbar
{
position:absolute;
top:0;
left:0;
bottom:0;
background-color:#808080;
width:200px;
height:100%;
float:left;
}#menu1 {
width: 200px;
float:left;
}#menu1 ul
{
list-style-type:none;
margin:0;
padding:0;
}#menu1 li
{
display: inline;
/* for IE5 and IE6 */
}#menu1 a
{
text-decoration: none;display: block;
padding: 3px;
width: 200px;
background-color: #808080;
border-bottom: 1px solid #eee;
}#menu1 a:link,
#menu1 a:visited
{
color: #dcdcdc;
text-decoration: none;
}#menu1 a:hover
{
background-color: #cae5ff;
color: #000066;
}#menu1 li a#current
{
background: #99ccff;
color: #000066;
}</style>
</head><body>
<div id="container">
<div id="leftbar">
<div id="menu1">
<ul>
<li> </li>
<li><a href="item-one.html" >Menu item one</a></li>
<li><a href="menu-item-two.html">Menu item two</a></li>
<li><a href="#"id="current">Item three</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div style="position:absolute;left:200px;top:0;bottom:0;padding:1em;height:100%;">
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<p>just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. </p>
<!--
<p>uncomment extra paragraphs to see how navigation menu does not extend to follow page content</p>
<p>just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. </p><p>just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. just some plain text. </p>
-->
</div>
</div>
</body>
</html>
bodyhtml
