My First Experience With Rounded Corners...And I Need Help!

[Racer_X]

I went on this site to copy the rounded corner code to use in my page. Only when I inserted a little more than the text they had, the design fell apart.

Is it my divs that are throwing everything off? What is making it push the content down to the bottom like that?

Also, how would I specify an auto scroll for the height of the white box?

Test Page


Thanks.

[DaveWoods]

Firstly remove the float from your #group div as it's causing the content to come out of the document flow and isn't needed. There are work arounds for this if you need to use a float but you don't need it so the easiest fix is to simply remove it.

#group {
width:300px;
margin-right:20px;
padding:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border-right:2px #eacdff dotted;
}

This will then leave you with a big gap at the bottom and the top due to you specifying a 400px height for the top and bottom. I've changed this to 20px and it should look much better but you can specify whatever height you require there.

/* height and width attributes */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 20px;
font-size: 1px;
}

Hope that helps.

[Racer_X]

Thanks, that helped a lot. I think I actually understand what is happening behind the curtain now. Anyway, I got my page how I want it in FF 2.0 and IE7, but for some reason the design is broken up in IE6.

It's margins or padding between the left and right section are different than FF's and since there's no room for the right column, everything gets pushed down to the next line. How do I fix this so it looks like FF?

Test URL

[Racer_X]

Anybody?