Hello all,

The comment system on my site is now taking shape but there is one problem.

The page needs to be able to extend with the comments. There is going to be a minimum amount of comments per page some of course vary in length.

Im wondering if its possible to get the "to do list" section to move with the script. I think this will give a cleaner look than over lapping.

Here is my CSS code

*
{
	padding: 0px;
}

body
{
	width: 1000px;
}

#head a, #head span
{
	color: #000000;
	text-decoration: none;
	font-size: 10px;
	font-family: tahoma;
	font-weight: 900;
	position: relative;
	top: -5px;
}

#head
{
	background-image: url(../images/layout/headerimage.jpg);
	background-repeat: no-repeat;
	background-position: 0px 20px;
	height: 190px;
}

#top_menu a
{
	font-size: 10px;
	font-weight: 900;
	text-decoration: none;
	font-family: ariel;
}

#top_menu
{
	position: relative;
	top: -2px;
	color: #ff0000;
}

#page_container
{
	position: relative;
}

#left_nav
{
	width: 202px;
}

#main_content
{
	width: 635px;
	position: absolute;
	top: 0px;
	left: 204px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	text-align: justify;
	height: 427px;
}

object
{
    padding-right: 10px;
}

img
{	
padding-right:10px;
border:none;
}

#right_nav
{
	width: 140px;
	position: absolute;
	left: 860px;
	top: 0px;
}

#foot
{
	text-align: center;
	padding-top: 6px;
	background-color: #5698cf;
}

.red
{
	color: red;
}

.hyphen
{
	font-size: 15px;
	position: relative;
	top: 0px;
}

.left_nav_header
{
	background-color: #0177b4;
	margin-bottom: 0px;
	font-family: tahoma;
	font-size: 14px;
	color: #CCFFFF;
	font-weight: 600;
	padding-left: 1px;
	padding-bottom: 1px;
}

.left_nav_content
{
	background-color: #5698cf;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 5px;
	padding-top: 10px;
	text-align: justify;
}

.left_nav_content a:link
{
	font-family: Arial;
	color: #ffffff;
	font-weight: 900;
	text-decoration: none;
	font-size: 12px;
}

.left_nav_content a:active
{
	font-family: Arial;
	color: #ffffff;
	font-weight: 900;
	text-decoration: none;
	font-size: 12px;
}

.left_nav_content a:visited
{
	font-family: Arial;
	color: #ffffff;
	font-weight: 900;
	text-decoration: none;
	font-size: 12px;
}

.left_nav_content a:hover
{
	font-family: Arial;
	color: #000000;
	font-weight: 900;
	text-decoration: none;
	font-size: 12px;
}

.todolist_header
{
	font-family: verdana;
	font-size: 17px;
	font-weight: 900;
	color: #000000;
}

.right_nav_header
{
	background-color: #5698cf;
	text-align: center;
	font-weight: 900;
	font-size: 15px;
	font-family: tahoma;
	color: #CCFFFF;
}

.right_nav_content
{
	margin-top: -3px;
	padding-left: 10px;
	padding-top: 10px;
	border-bottom: 2px solid #5698cf;
	border-left: 2px solid #5698cf;
	border-right: 2px solid #5698cf;
	margin-bottom: 5px;
}

p
{
	font-family: tahoma;
	font-size: 12px;
	line-height: 11pt;
	margin-top: 3px;
	margin-right: 0;
	margin-bottom: 3px;
	margin-left: 0;
	padding-bottom: 9px;
}

a
{
}

a:link
{
	color: #000000;
	text-decoration: none;
	font-weight: 900;
}

a:visited
{
	color: #000000;
	text-decoration: none;
	font-weight: 900;
}

a:active
{
	color: #000000;
	text-decoration: none;
	font-weight: 900;
}

a:hover
{
	color: #ff0000;
	text-decoration: none;
	font-weight: 900;
}

span.email
{
	font-family: tahoma;
	font-weight: 900;
	font-size: 12px;
}

span.breadcrumb
{
	font-family: tahoma;
	font-weight: 900;
	font-size: 12px;
}

span.h1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: #ff0000;
	line-height: 24px;
}

span.h2
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #ff0000;
	line-height: 20px;
}
span.h3
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ff0000;
	line-height: 20px;
}

span.h4
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ff0000;
	font-weight: normal;
	line-height: 10px;
	float:right;
}

.smalltext
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 900;
	position: relative;
	top: 5px;
}

Here is the testing page with the comment script running.

http://www.conceptskateboarding.com/what-if.php

Thanks for any help/advice

Jack

The page needs to be able to extend with the comments.

If you have cleared your floats and have NOT specified a particular height, then the vertical stretching should happen by default.

Thanks a lot for your reply,

Im not too good with CSS yet but im getting better. I understand what your saying i use floats quite a lot.

Any more guidence on how this can be resolved.

Thanks.

I think a lot of people would benefit from getting a membership to lynda.com

For $25 a month you could go through all of their basic, beyond the basics, and advanced CSS courses. Put in 30 hours and you've got a great foundation to build upon. I think this site deserves a plug as I knew nothing of html ( several flavors ), CSS, and several design oriented programs before I got my membership. Now, a year later, I feel pretty competent in my knowledge of these subjects.