...

View Full Version : Div height



relyt_123
09-24-2007, 02:25 AM
Alright, I have this HTML:
http://rafb.net/p/hkLjoT13.html

But, as you can see, the navigation sidebar on the left doesn't extend to the bottom of the #container div. Can anyone hint me as to why?

jlhaslip
09-24-2007, 08:56 AM
Add the color you want for the Nav column in the wrapper div, then change the colour for the main and header div's.

Because the content of the Navbar is not as 'tall' as the Main page, the colour stops at the end of the content. This code adds the colour to the wrapper behind the navigation.

Might want to drop the border right on the navigation and add a summary to the table. Table? Consider using a more semantic unit such as a UL for the nav links. Tables are good to eat off, or place stuff on, but not so good for html layout.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Team LaW</title>

<style type="text/css">
* {
font-family:verdana,sans-serif;
font-size:0.9em;
}
body {
margin:0px;
background-color:#000000;
}
h1 {
color:#336699;
font-size:1em;
text-align:center;
margin:0px;
padding:0px;
}
#container {
width:30%;
margin:1em auto;
border:3px solid #336699;
background-color:#99BBDD;
}
#header {
border-bottom:1px solid #000000;
background-color:#808080;

}
#navigation {
margin:0px 0px 0px 0px;
padding:1em 0px;
border-right:1px solid #000000;
float:left;
width:20%;
background-color:#99BBDD;
height:100%;
}
#navigation table {
margin:0px auto;
text-align:left;
}
#main {
margin-left:20%;
padding-left:0.5em;
background-color:#ffffff;
}
#footer { clear:both; }
p {margin:0px;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#AAAAAA;}
a:active {color:#000000;}
</style>
</head>

<body>
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="navigation">
<h1>:Navigation:</h1>
<table>
<tr> <td> <a href="http://www.google.com"> Home </a> </td> </tr>
<tr> <td> <a href="http://www.google.com"> WIP's </a> </td> </tr>
<tr> <td> <a href="http://www.google.com"> Games </a> </td> </tr>
<tr> <td> <a href="http://www.google.com"> Join Us! </a> </td> </tr>
</table>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris condimentum tortor vel felis. Nunc urna. Vivamus laoreet varius nibh. Aliquam orci. Suspendisse nec elit. Ut sit amet nibh nec risus blandit egestas. Fusce convallis nisi et nibh. Morbi lorem leo, ultrices at, egestas in, elementum vehicula, nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed viverra pretium erat. Maecenas felis purus, tincidunt vitae, fringilla eget, mattis sed, sapien. Integer eros ante, pharetra quis, tristique in, cursus ut, diam. Nulla facilisi. Morbi accumsan dignissim dui. Nulla sagittis aliquet libero.

Aenean pulvinar imperdiet est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor. Ut ac turpis sit amet sapien rhoncus venenatis. Proin condimentum turpis ac nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisi. Nullam tellus. Praesent mauris. In arcu orci, sollicitudin quis, dignissim ut, euismod a, erat. Nunc pede turpis, eleifend sed, iaculis et, dapibus sed, ante. Donec tincidunt placerat nisi. Etiam ut ante. Etiam sem.

Donec elit enim, lacinia sit amet, lacinia mattis, facilisis id, felis. Fusce at nisi vel felis dignissim fermentum. Duis velit ante, mollis blandit, fermentum in, varius vitae, lacus. Curabitur dapibus feugiat nulla. Curabitur gravida lectus a lorem. Mauris erat lectus, adipiscing adipiscing, faucibus in, egestas tristique, tortor. Nunc iaculis. Nam posuere ullamcorper sem. Phasellus tincidunt elit vel ipsum. Integer eget risus et est consequat rutrum. Nulla vehicula tristique justo. In nisi dolor, volutpat nec, aliquet ac, hendrerit ut, arcu. Cras non magna eget tortor porta venenatis. Praesent tristique purus vel metus. Donec malesuada congue ligula. Mauris tempor nisi vitae nulla. Maecenas ipsum tortor, mattis nec, pellentesque et, lobortis id, mauris.</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>

relyt_123
09-25-2007, 03:29 AM
Ah. Thank you.

As for your statement about the table. I used that because I wanted the links to be centered, but not aligned in the center. If I would have used <ul>'s I could have centered it, but then each <li> would have a different left-margin. Any other ways to do it besides a table?

garydarling
09-25-2007, 09:12 AM
Ah. Thank you.

As for your statement about the table. I used that because I wanted the links to be centered, but not aligned in the center. If I would have used <ul>'s I could have centered it, but then each <li> would have a different left-margin. Any other ways to do it besides a table?

Put the links in a <ul>, give it an id of menu (or something similar), style that id like so:


#menu {
width:200px; // or ems, %, pts, etc.
margin:0 auto;
text-align:left;
}

You can make the width whatever size and unit of measurement works for you, plus change the margin to any units you need to get it to sit where you want.

Gary



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum