Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Div height

  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div height

    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?

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.
    Code:
    <!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>

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by relyt_123 View Post
    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:

    Code:
    #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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •