I did a collapsing round-corner layout once just for practice (never put it online) but it worked nicely, although it had a min-width where it ceased to squeeze.

Here's the css for the four corners (tl is top left, etc.; graphics were about 20x20)

Code: Select all

#bl {position: absolute; 
left: 0%; 
top: 120px;
float: left;}

#tr {float: right;}

#br {position: absolute; 
right: 0%; 
top: 120px;}

Then I just popped them all in a div.

Hmm, I seem to be missing #tl. Well that's the easy one, probably I just floated it left.

I'm sorry, my files are a total mess for this since I was experimenting, and I can't tell at this point which css file I actually used. I may have put the top corners in a separate div at some time. The point is, I didn't nest divisions.

My last iteration of this had a head box with round corners and a separate text box with round top corner, with buttons in-between.

I think I had two columns of text, one at a % and one auto.

<-- no expert, but this worked for me.