Using Javascript to Set the Height of a Div

Discussion in 'Web Design and Development' started by iMasterWeb, Nov 13, 2009.

  1. iMasterWeb macrumors regular

    Joined:
    Mar 15, 2009
    #1
    Hey there! I'm in the process of designing/coding my first blog by hand. What I'm trying to do, is set the height of the content AND content wrapper divs based on the height of the actual post length.

    here's my code:
    Code:
    <html>
    <head>
    <!DOCTYPE HTML>
    <LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
    <title>Blog Post</title>
    </head>
    <body>
    
    <script type="text/javascript">
    window.onload = setHeight;
    
    function setHeight() {
    	var pageWrap = document.getElementById('content_wrapper')
    	var page = document.getElementById('content')
    	var p = document.getElementById('post')
    	var ph = p.offsetHeight
    	page.style.height = ph + 50 + 'px';
    	pageWrap.style.height = ph + 50 + 'px';
    	</script>
    
    ...
     <!--Main page (under navigation)-->
     	<div id = content_wrapper>
     		<div id= content>
     		
    ...
     				
     				<div id = post>
     	        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla consequat sollicitudin. Phasellus nec risus nibh, ut vestibulum ipsum. Vestibulum id est massa. Donec ultricies ullamcorper mi, et ultricies tortor bibendum ut. Morbi eget nisl a nisi elementum sollicitudin. Mauris ut dolor libero, rutrum tristique eros. Maecenas eu mauris quis urna pellentesque bibendum sit amet eu ipsum. Cras posuere lacinia tristique. Praesent sagittis vestibulum nisi eu gravida. Aliquam commodo congue adipiscing. Sed pellentesque tempor arcu, et euismod erat lacinia at. Etiam volutpat mollis fringilla. Aliquam libero neque, pulvinar ac consequat eu, vestibulum vitae eros. Ut a hendrerit nisi. Nam sagittis luctus lectus bibendum vulputate. Sed sed est tellus. Aliquam nisl enim, viverra vel congue nec, aliquet et tortor. Pellentesque enim est, scelerisque ut dictum a, dapibus sed nisl. Vestibulum cursus tellus leo.
     	<br> <br>
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci velit, porta vel lobortis et, vulputate tincidunt velit. Donec facilisis semper lacus porttitor fringilla. Aliquam vel dolor est, at posuere augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac viverra mi. Sed imperdiet ligula nec nibh semper gravida. Mauris posuere, nunc eu hendrerit commodo, dui erat facilisis elit, vel vestibulum libero diam id erat. Nullam in urna id dui pretium sodales in eget tellus. Sed nibh velit, condimentum eget molestie vel, bibendum vitae magna.
        <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
            <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
     				</div>		
     			</div>
    ...	
    
    </div>
    </body>
    </html>
    obviously, I've removed some stuff to make it easier for you. Here's the part of my CSS this problem concerns:
    Code:
    #content_wrapper {
    	float:  left;
    	width:  100%;
    	height: 720px;
    	float: left;
    	background-color: #CCCCCC;
    }
    
    #content {
    	width:  960px;
    	height:  720px;
    	margin: 0 auto;
    }
    If you need anything else, tell me. Other than that, this is my first time with ALL of this (HTML, Javascript, CSS) so please be gentle ;) Thanks for the help!

    -iMaster
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You should be able to make use of this tutorial to get that done. Though, it's not clear why you need it. Just let the content fill the space as need be, then you don't need to manually set the height.

    You also have two float lines on your #content_wrapper.
     
  3. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #3
    The reason is that I have a footer beneath it that looks funny when the height isn't right (e.g. the background color extends the specified height, but the text overflows into the footer) I know that's confusing. I'll check out that tutorial.

    Thanks!

    -iMaster

    P.S. Thanks for the float lines....didn't see that :p
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    If you have a live page where you're doing this, one of us may be able to offer a solution that doesn't require JavaScript to get what you want.
     
  5. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #5
    I don't have a live page...and I know that that limits what you can do for me, but I have an image: [​IMG]

    That is an example of what happens when the page "breaks". The dark grey is the footer (soon to be comments) area and the light grey is the content area. The text overflows into the footer. I could use the "overflow" property in CSS, but I don't want a scrollbar on just that section, I want it on the whole thing. I don't even know if that applies.... :eek:

    Anyways, thanks for the help!

    -iMaster
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    It could potentially be a simple matter of have the footer "clear" the floated content. I'm not sure if your footer is inside your content_wrapper.
    Code:
    #content_wrapper {
    	float:  left;
    	width:  100%;
    	/* [s]height: 720px;
    	float: left;[/s] */
    	background-color: #CCCCCC;
    }
    #content {
    	width:  960px;
    	/* [s]height:  720px;[/s] */
    	margin: 0 auto;
    }
    #footer {
     clear: both;
    }
     
  7. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #7
    Ok, tried that and it didn't work, the most likely problem is that my HTML is wrong. I've gone through it, cleaned it up a bit and here it is. (wherever you see "..." is a place where the DIV tags cancel themselves out, and have nothing to do with the problem)

    Code:
    <html>
    <head>
    <!DOCTYPE HTML>
    <LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
    <title>Blog Post</title>
    </head>
    <body>
    <div id = page>
    
    
    <!--Header-->
     ...
     	
     <!--Navigation-->
    ...
     	
     <!--Main page (under navigation)-->
     	<div id = content_wrapper>
     		<div id= content>
     		
     			<!--Main content-->
     			<div id = blog>	
     			
     				<!--Post Header (title, date, etc.)-->
                                      ...
     				
     				<div id = post>
     	        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla consequat sollicitudin. Phasellus nec risus nibh, ut vestibulum ipsum. Vestibulum id est massa. Donec ultricies ullamcorper mi, et ultricies tortor bibendum ut. Morbi eget nisl a nisi elementum sollicitudin. Mauris ut dolor libero, rutrum tristique eros. Maecenas eu mauris quis urna pellentesque bibendum sit amet eu ipsum. Cras posuere lacinia tristique. Praesent sagittis vestibulum nisi eu gravida. Aliquam commodo congue adipiscing. Sed pellentesque tempor arcu, et euismod erat lacinia at. Etiam volutpat mollis fringilla. Aliquam libero neque, pulvinar ac consequat eu, vestibulum vitae eros. Ut a hendrerit nisi. Nam sagittis luctus lectus bibendum vulputate. Sed sed est tellus. Aliquam nisl enim, viverra vel congue nec, aliquet et tortor. Pellentesque enim est, scelerisque ut dictum a, dapibus sed nisl. Vestibulum cursus tellus leo.
     	<br> <br>
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci velit, porta vel lobortis et, vulputate tincidunt velit. Donec facilisis semper lacus porttitor fringilla. Aliquam vel dolor est, at posuere augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac viverra mi. Sed imperdiet ligula nec nibh semper gravida. Mauris posuere, nunc eu hendrerit commodo, dui erat facilisis elit, vel vestibulum libero diam id erat. Nullam in urna id dui pretium sodales in eget tellus. Sed nibh velit, condimentum eget molestie vel, bibendum vitae magna.
        <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
            <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
                <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
     				</div>		
     			</div>
     				
     <!--Sidebar--> 				
     	...
     	</div>
     	</div>
     	
     <!--Comments-->
     <div id = comment_wrapper>
    
    	<!--bar-->
    	...
    		
     <!--Comments-->
     <div id = comments>
     <div id= user_comments>
     </div>
    
    	<!--Comment Form-->
    	...
    </div>
    </div>
    
    </div>
    </body>
    </html>
    And the CSS:
    Code:
    #page {
    	width: 100%;
    	height: 100%;
    	font-family: "Arial", Verdana, sans-serif;
    }
    
    
    #content_wrapper {
    	width:  100%;
    	background-color: #CCCCCC;
    }
    
    #content {
    	width:  960px;
    	margin: 0 auto;
    }
    
    #blog {
        float: left;
    	width: 650px;
    	height: 1000px;
    }
    
    
    
    #post {
    	color: #333333;
    	margin: 35px 15px;
    	font-size: 16px;
    }
    
    /*Comments*/
    
    #comment_wrapper{
    	width: 100%;
    	height: 100%;
    	background-color: #333333;
    	clear: both;
    }
    
    #comments{
    	width: 960px;
    	height: 100%;
    	margin-top: 27px;
    	margin: 0 auto;
    }
    
    #user_comments{
    	margin:  0 14px;
    	width: 614px;
    	height: 100%;
    	float: left;
    }
    
    Thanks for the help!

    -iMaster
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Some of the HTML was kind of malformed and invalid so I tinkered with that a bit. I think things look decent with the content you provided. I believe some of the miss-formed parts were causing some of the issue.
    • The DOCTYPE needs to be first, before the html tag at the top of the page.
    • Always quote attributes, and don't use space around the equal sign.
    • A div tag already is set for 100% width so you don't need to declare it.
    • I added a character set for you as a meta tag.
    I put the CSS in a style tag simply for ease of posting. You can move it to a separate file like you had.
    HTML:
    <!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=utf-8">
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen">
    <title>Blog Post</title>
    <style type="text/css">
    #page {
    /*
    	width: 100%;
    	height: 100%;
    */
    	font-family: Arial, Verdana, sans-serif;
    }
    
    #content_wrapper {
    /*
    	width:  100%;
    */
    	background-color: #CCCCCC;
    }
    
    #content {
    	width:  960px;
    	margin: 0 auto;
    }
    
    #blog {
        float: left;
    	width: 650px;
    /*
    	height: 1000px;
    */
    }
    
    #post {
    	color: #333333;
    	margin: 35px 15px;
    	font-size: 16px;
    }
    
    /*Comments*/
    
    #comment_wrapper{
    /*
    	width: 100%;
    	height: 100%;
    */
    	background-color: #333333;
    	clear: both;
    }
    
    #comments{
    	width: 960px;
    /*
    	height: 100%;
    */
    	margin-top: 27px;
    	margin: 0 auto;
    }
    
    #user_comments{
    	margin:  0 14px;
    	width: 614px;
    /*
    	height: 100%;
    */
    	float: left;
    }
    </style>
    </head>
    <body>
    <div id="page">
    
    <!--Header-->
     ...
     	
     <!--Navigation-->
    ...
     	
     <!--Main page (under navigation)-->
     	<div id="content_wrapper">
     		<div id="content">
     		
     			<!--Main content-->
     			<div id="blog">	
     			
     				<!--Post Header (title, date, etc.)-->
                                      ...
     				
     				<div id="post">
     	        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla consequat sollicitudin. Phasellus nec risus nibh, ut vestibulum ipsum. Vestibulum id est massa. Donec ultricies ullamcorper mi, et ultricies tortor bibendum ut. Morbi eget nisl a nisi elementum sollicitudin. Mauris ut dolor libero, rutrum tristique eros. Maecenas eu mauris quis urna pellentesque bibendum sit amet eu ipsum. Cras posuere lacinia tristique. Praesent sagittis vestibulum nisi eu gravida. Aliquam commodo congue adipiscing. Sed pellentesque tempor arcu, et euismod erat lacinia at. Etiam volutpat mollis fringilla. Aliquam libero neque, pulvinar ac consequat eu, vestibulum vitae eros. Ut a hendrerit nisi. Nam sagittis luctus lectus bibendum vulputate. Sed sed est tellus. Aliquam nisl enim, viverra vel congue nec, aliquet et tortor. Pellentesque enim est, scelerisque ut dictum a, dapibus sed nisl. Vestibulum cursus tellus leo.
     	<br> <br>
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci velit, porta vel lobortis et, vulputate tincidunt velit. Donec facilisis semper lacus porttitor fringilla. Aliquam vel dolor est, at posuere augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac viverra mi. Sed imperdiet ligula nec nibh semper gravida. Mauris posuere, nunc eu hendrerit commodo, dui erat facilisis elit, vel vestibulum libero diam id erat. Nullam in urna id dui pretium sodales in eget tellus. Sed nibh velit, condimentum eget molestie vel, bibendum vitae magna.
        <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
            <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
                <br> <br>
                In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
     				</div>		
     			</div>
     				
     <!--Sidebar--> 				
     	...
     	</div>
     	</div>
     	
     <!--Comments-->
     <div id="comment_wrapper">
    
    	<!--bar-->
    	...
    		
     <!--Comments-->
     <div id="comments">
     <div id="user_comments">
     </div>
    
    	<!--Comment Form-->
    	...
    </div>
    </div>
    
    </div>
    </body>
    </html>
     
  9. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #9
    OK.....I guess that's better technically, but visually it causes some errors. Here's a screen shot:

    [​IMG]

    NOTE: I have changed everything you mentioned above.

    Thanks for the help!

    -iMaster
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Well, once you get the site live we can take another look. It didn't look that way to me so it's likely from some of the content you cut out. There was no user name and password field in the code you gave earlier so not sure what's going on there.
     
  11. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #11
    Ok, I've got it live http://www.newblog.byethost12.com/blogpost.html

    Obviously, I'm still in the "design" phase so the comments form doesn't do anything, most of the links are dead, etc. but You can still see the problem. Thanks TREMENDOUSLY for the help!

    -iMaster
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    OK, I did quite a bit of tweaking so I won't try to talk through all of them. I will make a few comments for general HTML though. Also, because I saved the page off locally to work on it, the image paths in the code are not what you had so you'll need to go through them and change them accordingly both in the HTML and CSS. The CSS is a bit messy. I had tried to make comments on what I was changing, but it didn't work out that well. Hopefully you can make sense of it.

    With all the changes you may want to keep this separate from what you have. You can either use it as a reference, or just use it and work from it. Once you have some comment content in there you'll likely need to work the comment CSS some. I didn't touch its CSS since there was no content so see how it would be effected.

    I moved the comment form inside the sidebar div. It looked like that was what you were trying to do i.e., have it under the sidebar stuff. I only tested this on Mac Firefox and Safari, so you'll want to test it in IE as well when you can.

    • An id attribute value should only ever occur once per page. It's a unique value, that's what makes it different from a class attribute.
    • There's a label tag for forms so you didn't need to create fake ones in the form. The code posted changes them.
    • Avoid using the hr tag. You can generally always use CSS to create a border in the right spot.
    • Instead of using the & nbsp ; you can use CSS's text-indent property.
    • Avoid using the br tag.
    • Always quote attributes on tags and don't have spaces on either side of the equal sign.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Blog Post</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="blogpost_files/stylesheet.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="page">
    
    <!--Header-->
     	<div id="header_wrapper">
     		<div id="header">
     		<p id="logo"><a href="home.html"><img src="blogpost_files/logo.jpg" alt="iMasterWeb" /></a></p>
     		</div>
     	</div>
     	
     <!--Navigation-->
     	<div id="nav_wrapper">
     		<div id="nav">
     		</div>
     	</div>
     	
     <!--Main page (under navigation)-->
     	<div id="content_wrapper">
     		<div id="content">
     		
     			<!--Main content-->
     			<div id="blog">	
     			
     				<!--Post Header (title, date, etc.)-->
     				<div id="post_header">
     					<h1>Post Title</h1>
     					<small class="date">Novmeber ??, 2009</small>
     					<small class="comment">Leave a Comment</small>
     				</div>
     				
     				<div id="post">
     	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla consequat sollicitudin. Phasellus nec risus nibh, ut vestibulum ipsum. Vestibulum id est massa. Donec ultricies ullamcorper mi, et ultricies tortor bibendum ut. Morbi eget nisl a nisi elementum sollicitudin. Mauris ut dolor libero, rutrum tristique eros. Maecenas eu mauris quis urna pellentesque bibendum sit amet eu ipsum. Cras posuere lacinia tristique. Praesent sagittis vestibulum nisi eu gravida. Aliquam commodo congue adipiscing. Sed pellentesque tempor arcu, et euismod erat lacinia at. Etiam volutpat mollis fringilla. Aliquam libero neque, pulvinar ac consequat eu, vestibulum vitae eros. Ut a hendrerit nisi. Nam sagittis luctus lectus bibendum vulputate. Sed sed est tellus. Aliquam nisl enim, viverra vel congue nec, aliquet et tortor. Pellentesque enim est, scelerisque ut dictum a, dapibus sed nisl. Vestibulum cursus tellus leo.</p>
    
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci velit, porta vel lobortis et, vulputate tincidunt velit. Donec facilisis semper lacus porttitor fringilla. Aliquam vel dolor est, at posuere augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac viverra mi. Sed imperdiet ligula nec nibh semper gravida. Mauris posuere, nunc eu hendrerit commodo, dui erat facilisis elit, vel vestibulum libero diam id erat. Nullam in urna id dui pretium sodales in eget tellus. Sed nibh velit, condimentum eget molestie vel, bibendum vitae magna.</p>
    
        <p>In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada</p>
    
        <p>In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada</p>
    
        <p>In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada</p>
     				</div>		
     			</div>
     				
     <!--Sidebar--> 				
     	<div id="sidebar">
     		
     		<!--Vertical line-->
    <!-- 
     		<div id="separator">
     		</div>
     -->
     		
     		<!--Sidebar content-->
     		
     		<!--RSS-->				
     		<h2>Subscribe</h2>
     		<ul id="subscribe">
          <li><a href="#">Subscribe via RSS</a></li>
          <li><a href="#">Subscribe via Email</a></li>
          <li><strong>XXXX Subscribers</strong></li>
     		</ul>
     		
     		<!--Categories-->
     		<h2>Browse</h2>
     		<ul id="categories">
     			<li><a href="#">News ............................................ (0)</a></li>
     			<li><a href="#">CSS ............................................. (5)</a></li>
     			<li><a href="#">Apps ............................................ (2)</a></li>
     			<li><a href="#">Gaming ........................................ (3)</a></li>
     			<li><a href="#">Reviews ....................................... (0)</a></li>
     			<li><a href="#">Design .......................................... (7) </a></li>
     		</ul>
     		
     		<!--Social media-->
     		<h2>Share the Love</h2>
     		<ul id="social">
     		<li><a href="#">Follow me on Twitter</a></li>
     		<li><a href="#">Subscribe on Youtube</a></li>
     		</ul>
    
    	<!--Comment Form-->
    	<div id="comment_form">
    <!-- 
    	<div id="form_divider">
     	</div>
     -->
    		<form method="post" action="">
    		<ul>
          <li><label for="Name">Name</label>
          <input type="text" name="Name" id="Name" class="required" /></li>
          <li><label for="Email">Email</label>
          <input type="text" name="Email" id="Email" class="required" /></li>
          <li><label for="Website">Website</label>
          <input type="text" name="Website" id="Website" /></li>
          <li><label for="Comment">Comment</label>
          <textarea name="Comment" id="Comment" rows="7" cols="20"></textarea></li>
    		</ul>
    		<p><input type="submit" value="Submit" class="submit"/></p>
    		</form>	
      </div><!-- end comment form -->
     		
     	</div>
     	</div>
     	<div class="clear"></div>
     	</div>
     	
     <!--Comments-->
     <div id="comment_wrapper">
    
    	<!--bar-->
    	<div id="comm_bar">
    	</div>
    		
     <!--Comments-->
     <div id="comments">
     <div id="user_comments">
     </div>
    
    </div>
    </div>
    
    </div><!-- end page -->
    </body>
    </html>
    Code:
    a img {
     border: none;
    }
    #page {
    	width: 100%;	
    	font-family: Arial, Verdana, sans-serif;
    }
    
    #header_wrapper {	
    /*
    	float:  left;
    */
    	padding: 20px 0 0 0; /* added */
    	width:  100%;
    	height: 160px; /* was 180 */
    	background-color: #666666;
    }
    
    #header {
    	width: 960px;
    	height: 180px;
    	background-color: #666666;
    	margin: 0 auto;
    }
    
    #logo {
    	margin: 8px 0 28px 9px;
    }
    
    #nav_wrapper {
    /*
    	float: left;
    */
    	width: 100%;
    	height: 79px;
    	background-image: url("nav.jpg");
    }
    
    #nav {
    	width:  960px;
    /*
    	height: 79px;
    */
    	margin: 0 auto;
    }
    
    #content_wrapper {
     padding: 0; /* added */
    	width:  100%;
    	background-color: #CCCCCC;
    }
    
    #content {
    	width:  960px;
    	margin: 0 auto;
    	padding: 0; /* added */
    }
    
    #blog {
     position: relative; /* added */
     top: -20px;
     padding: 0;
        float: left;
    	width: 650px;
    /*
    	height: 1000px;
    */
    }
    
    #featured {
    	width: 630px;
    	height: 225px;
    	background-image: url("featured.jpg");
    	margin: 10px auto 0 auto;	
    }
    
    #recent_post_wrapper {
    	width: 630px;
    	height: 68px;
    	margin: 10px auto 0 auto;
    }
    
    #rp_comment {
    	float: right;
    	width: 100px;
    	border-left: 1px solid #666666;
    	border-right: 1px solid #666666;
    	height: 68px;
    	background-image: url("rp_comments.jpg");
    	background-repeat: repeat-x;
    }
    
    #recent_post_title {
    	width: 630px;
    	height: 68px;
    	background-image: url("recent_post.jpg");
    	background-repeat: repeat-x;
    }
    
    
    /*
    #separator {
    	position: absolute;
    	top: 60px ;
    	left: -14px ;
    	width:  1px;
    	background-color: #333333;
    	height: 530px;
    }
    */
    
    #sidebar {
     position: relative;
     top: 0; right: 0;
    	float: right;
    	width: 290px; /* was 281 */
    	/* height: 660px;*/
    	padding: 0px 0px 0 13px;
    	color: #333333;
    	font-family: Arial, Verdana, sans-serif;
    	margin: 10px 0px 0 0px; /* -10px 14px 0 14px */
      border-left: 1px solid #888;
    }
    #sidebar h2 {
     border-bottom: 1px solid #000;
    }
    #sidebar ul {
     margin-bottom: .7em;
    }
    
    #sidebar li strong {
    	color: #333333;
    	font-size: 19px;
    /*
    	height: 32px;
    	width: 281px;
    */
    	display: block;
    	padding-top: 5px;
    	font-weight: bold;
    }
    
    #sidebar a{
    /*
    	width: 281px;
    	height: 32px;
    */
    	line-height: 2; /* added */
    /*
    	border-right: 1px solid #999999;
    */
    	color:  #333333;
    	text-decoration: none;
    	line-height: 32px;
    	display: block;
    	text-indent: 10px;
    }
    
    #sidebar a:hover, #subscribe a:hover, #social a:hover{
    /*
    	width: 281px;
    	height: 32px;
    	border-right: 1px solid #cc9933;
    */
    	background-color: #333333;
    	color:  #ffffff;
    	text-decoration: none;
    	line-height: 32px;
    	display: block;
    	text-indent: 10px;
    }
    
    #sidebar a:active, #subscribe a:active, #social a:active{
    /*
    	width: 281px;
    	height: 32px;
    	border-right: 1px solid #cc9933;
    */
    	background-color: #333333;
    	color:  #ffffff;
    	text-decoration: none;
    	line-height: 32px;
    	display: block;
    	text-indent: 10px;
    	margin-left: 5px;
    }
    
    h2 {
    	color: #333333;
    	font-size: 28px;
    	font-weight: bold;
    	margin: 0px 0 0 0;
    	padding: 0; /* added */
    /*
    	width: 281px;
    */
    }
    
    #categories, #subscribe, #social{
    	margin: 0;
    	padding: 0;
    }
    
    #categories li, #subscribe li, #social li{
    	list-style: none;
    	margin: 0;
    	text-indent: 0px;
    
    }
    
    /*
    hr {
    	color:  #333333;
    	background-color: #333333;
    	height: 1px;
    	border: none;
    	width: 281px;
    	margin: -5px 0 10px 0;
    }
    */
    
    #twitter, #youtube {
    	height:  57px;
    	width: 281px;
    	background-color: #ffffff;
    	margin: 7px 0;
    }
    
    
    /*Blog Post*/
    
    #post_header {
     position: relative; /* added */
     top: 0px; /* added */
    	width:  630px;
    /*
    	height:  92px;
    */
    	margin: 0px auto; /* -17px auto */
    	padding: 0 0 7px 0; /* added */
    	background-image: url("post_header.jpg");
    }
    
    h1 {
    	color: #ffffff;
    	font-size: 45px;
    	font-weight: normal;
    	font-family: "Arial", Verdana, sans-serif;
    /*
    	line-height: 55px;
    */
    	text-align: center;
    	padding: 2px 0 0 0;
    }
    
    .date {
    	color:  #ffffff;
    	font-size: 16px;
    	float: left;
    	margin: -22px 0 0 15px;
    }
    
    .comment {
    	color:  #ffffff;
    	font-size: 16px;
    	float: right;
    	margin: -22px  15px 0 0;
    }
    
    #post {
    	color: #333333;
    	margin: 10px 15px 0px 15px; /* 35px 15px */
    	font-size: 16px;
    	clear: both; /* added */
    }
    #post p {
     text-indent: 2em;
    }
    
    /*Comments*/
    
    #comment_wrapper{
    	width: 100%;
    	background-color: #333333;
    	clear: both;
    }
    
    #comments{
    	width: 960px;
    /*
    	margin-top: 27px;
    */
    	margin: 0 auto;
    }
    
    #comm_bar{
    	height: 14px;
    	width: 100%;
    	background-image: url("comment_bar.jpg");
    }
    
    #user_comments{
    	margin:  0 14px;
    	width: 614px;
    	float: left;
    }
    
    #comment_form {
    /*
    	width: 300px;
    */
    	margin: 0px 0 0px 0px; /* -75 10 */
    	/*height: 100px;
    	float: right;*/
    	position: relative;
    	border-top: 6px double #000;
    }
    
    /*
    #form_divider {
    	position: absolute;
    	top: 20px ;
    	left: -14px ;
    	width:  2px;
    	background-color: #999999;
    	height: 530px;
    }
    */
    #comment_form ul {
     margin: 0; padding: 0;
    }
    #comment_form li {
     margin: 10px 0 0 0; padding: 0;
     list-style: none;
    }
    #comment_form input {
    /*
    	height: 39px;
    */
    	width: 96%; /* was 300 */
    	padding: .4em .3em;
    	background-color: #666666;
    	border: none;
    /*
    	margin-bottom: 15px;
    */
    	font-size: 21px;
    	color: #cccccc;
    }
    
    #comment_form label {
     display: block;
     margin: 0 0 4px 0;
     padding: 0 0 2px 0;
    /*
    	color: #CCCCCC;
    */
    	font-size: 24px;
    	border-bottom: 1px solid #333;
    }
    
    /*
    #label_line{
    	color:  #CCCCCC;
    	background-color: #999999;
    	height: 1px;
    	border: none;
    	width: 100%;
    	margin: -2px 0 5px 0;
    }
    */
    
    /*
    #required{
    	height: 39px;
    	width: 100%;
    	background-color: #666666;
    	border: 1px solid #cc9933;
    	margin-bottom: 15px;
    }
    */
    
    textarea{
    	width: 100%; /* was 300 */
    	height: 225px;
    	background-color: #666666;
    	border: none;
    	font-size: 18px;
    	color: #CCCCCC;
    }
    
    #comment_form  .submit{
    	width: 130px;
    /*
    	height: 35px;
    */
    	border: 1px solid #cc9933;
    	background-color: #666666;
    	color: #CCCCCC;
    /*
    	margin: 5px auto;
    */
    }
    
    div.clear {
     clear: both;
    }
    
    #footer {
     margin: 0; padding: .5em;
     clear: both;
    }
     

Share This Page