Div doesn't stretch to content in IE8/Chrome

Hi,

I'm currently in the process of developing a website which uses rounded corners. This is accomplished by using the technique described here. It looks like this technique works, at least in IE7, but when I check it in IE8 or Chrome the content doesn't stretch the div out.

I would also like to note that in IE6 for some reason the right side doesn't render correctly. If I strip the box of it's current content and just put in some plain text it has no problem rendering correctly. What am I doing wrong here? Any help on how to fix this/improve the code I'm using are more then welcome.

You can find the site here:
http://www.dvolve.org/ms/test/test.htm

Thanks in advance!

-devnl

 

apply overflow:hidden to .mainbody

.mainbody {
	background-color: #fff;
	width: 890px;
        overflow:hidden;
}

Code (markup):

 

Thanks, that did the trick on the content not stretching the box out, any idea about the IE6 right side not rendering? And how would I go about aligning the comments (div with class bodycomments) box to the right? Floating doesn't seem to do the trick for me.

 

it wont float to the right because you're assigning a 100% width to (.bodycomments)...try changing the witdh to another value ... i suggest you add another div to hold each post i.e

<div class="post"><!-- apply your border bottom to this div : add overflow:hidden; -->
     <span class="dateHeader">{DATE}</span>
     <h2>{SOME TITLE}</h2>
     <div class="bodycomments">
     {COMMENTS}
     </div>
</div>

Code (markup):

 

Thanks again! Now all that's left is the IE6 right border

 

I checked your site, add this to your style-ie6.css

.dialog .bd .c .s {
	margin-right:33px;
}

Code (markup):