Forum Moderators: open
This is my very first post on here, so I hope I post in the appropriate manner.
I have been interested in web design writing in html for a while on and off. I do not try to be an expert by any means...more of a hobbiest or enthusiast, just interested to see what I can do and learn. So forums like this are invaluable for me.
OK onto the problem...
I am trying to make a very simple layout. Basically a title div, which spans the whole page (or in this case about 80% of the page; its within a 'whole body div' to contain everything). Then below that, two perfectly aligned (which gaps) divs, one for the navbar and one for content. Then below that, once the content has finished, a footer div, which basically mirrors the title div in construction.
Everything so far works well (In IE at this precise moment - can't check FF until I get home) The only problem I have is that I can't seem to control the height of the two divs 'navbar' and 'contents'.
At first the layout as shown below, shows the navbar and contents to be the same height, but off the bottom of the page, even though they are mostly empty.
1) How do I make these two divs remain same height and only as big as they need to be? i.e. if there is only a few lines of content, then only be high enough to cover that...then end and go to footer.
Next, if you uncomment out the extra line in the 'contents' div, this will add many extra lines of text which will push the height of the contents div up, but the navbar does not grow with it.
2) How do I make the navbar and contents div both stay the same height? i.e. which ever has the greatest content in it dictates the height of both...and of course maintains the 10px margin to the footer div.
Hope you can help! sorry for the long post.
Code following below.
Thanks for your time.
Jon.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
height: 100%;
}
p,h1,h2
{
padding: 0.5em 0;
}
li
{
padding: 0.15em;
margin:0;
}
div.body
{
padding: 1em;
margin: 0 auto;
width:1000px;
border:0;
height: 100%;
}
div.title
{
width: 998px;
border: 1px solid black;
padding:0.2em 0;
text-align:left;
}
div.container
{
height:100%;
}
div.navbar
{
float: left;
width:188px;
height: 100%;
text-align: left;
border: 1px solid black;
margin: 10px 0;
padding: 10px 0 10px 10px;
}
div.navbar ul
{
list-style-type: none;
margin-left:0.3em;
}
div.contents
{
float: right;
width: 778px;
height: 100%;
margin: 10px 0;
text-align: left;
border: 1px solid black;
padding: 10px 0 10px 10px;
}
div.footer
{
width: 998px;
border: 1px solid black;
padding:0.2em 0;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<div class="body">
<div class="title">
Title Div
</div>
<div class="container">
<div class="navbar">
<ul>
<li>navbar
<li>navbar
<li>navbar
<li>navbar
<li>navbar
</ul>
</div>
<div class="contents">
<p> This is the Contents div. Repeat or remove lines many times to see how navbar and contents div don't stay same height</p>
<p>another line</p>
<!--uncomment out lines below to see how extended content moves the 'contents' div down along with the 'footer' div but the 'navbar' div does not follow.-->
<!--<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>
<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>
<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>
<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>
<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>
<p>another line</p><p>another line</p><p>another line</p><p>another line</p><p>another line</p>-->
</div>
</div>
<div class="footer">
This is the Footer div.
</div>
</div>
</body>
</html>
you haven't mention float in footer div
so here is the solution
**************************************
div.footer
{
float:left;
}
**************************************
append above line and check your code
i have tested in FF, IE (6,7), Opera, NN and safari
no issue their too
Sigh...makes me feel a bit silly when its such a simple fix, but hey this is how we learn.
Thank you very much for that!
...Could you explain a little why adding that left float makes both the navbar and contents div suddenly both fill full height down to the footer please? Its nice to have a simple fix,but I would like to understand why that fixed it.
Many thanks indeed!
Regards,
Jon
This was in IE6.
? hope you can help
Regards,
Jon
Ah well, I think I will just fix the height of the navbar and let the content grow and shrink as required. The footer stays attached where it should be so thats the main thing.
Regards,
Jon
you can check the code again, and find float:left; in each element
if you want to study this thing in depth,
just comment float:left; element by element and check the output in various browsers,
hopefully i convey my msg regarding floating issue :S
