Help please

[ColdEdge]

Hi, I am trying to make a basic topic view for my own sites forums which I am making.The problem is that the color that should be displayed under avatar and ect is not displayed and I had to use clear:both; divs under the contence to make things work heres is the code with the css used...

<div style="width:900px;height:auto;background-color: #eff1f3;">					<div style="width:116px;float:left;background-color: #c6dfc3;padding:12px;color:#634c55;font-size:11px;">					' . $posts_row['user_name'] . '					</div>					<div style="width:736px;float:right;background-color: #c6dfc3;padding:12px;color:#634c55;font-size:11px;">							' . date('d-m-Y H:i', strtotime($posts_row['post_date'])) . '<a href="#post'.$posts_row['post_id'].'" name="post'.$posts_row['post_id'].'" rel="nofollow" style="float:right;padding:-2px 4px;"># '.$i.'</a>					</div>					<div style="clear:both;"></div>					<div style="float:left;width:116px;background-color: #e7eaef;">					<div style="width:120px;float:left;background-color: #e7eaef;padding:10px;">							<a href="member.php?uid='.$posts_row['user_id'].'"><img src="' . $posts_row['user_thumb'] . '" class="user_avatar"/></a><br>					<p style="font-size:11px;">' . $posts_row['user_rank'] . '</p><br>					<div style="clear:right;"></div>					</div>					</div>					<div style="width:740px;float:right;padding:10px;background-color: #eff1f3;">					<div style="width:740px;float:right;">												<p>' . $posts_row['post_content'] . '</p>					</div>							</div>					<div style="clear:both;"></div>						<div style="width:900px;height:26px;background-color:#c6ccd4;margin:0 auto;">					</div>										</div>					<div style="clear:both;height:20px;"></div>

and here is the image that shows the problem...As you can see the left side is not displaying same color as where the avatar and the rank is. And I am having problems making the contence part auto expand. So if user post a common lets just say "Hello" there will be a still space, as the right side will be smaller compared to left side.And I would to remove the background-color: #eff1f3; from the very first div then there would be white space under the comment. I am doing this with just CSS so if some one can help me style this, that would be great. Thanks a dozen.

[thescientist]

it seems like you would like the left side to extend down as the right side expands. You could use a background-image to simulate two colors on each side; and make the width of the color section on left as wide as your avatar box is. The background image can made to repeat vertically, and this will give the illusion of auto-height adjusting columns.

[ColdEdge]

Is there a different way? without the use of images?

[thescientist]

Is there a different way? with use of images?

thats what I just said...

[ColdEdge]

thats what I just said...

I inted to type without ^^ misspelled sorry about that

[thescientist]

probably. Google "faux-columns". There are a couple of ways short of getting into Javascript. The bg image is probably the simplest and easiest.

[dsonesuk]

sorry if i'm totally way off here. but why not give the first div the same colour as the left panel, its behind both left and content areas.<div style="width:900px;height:auto;background-color: #E7EAEF;">OR you mention white space instead?<div style="width:900px;height:auto;background-color: #fff;">then set a min-height for post content container<div style="width:740px;float:right; min-height: 320px;">approx height