Ugh, the html markup he uses to make it happen is disgusting. You might as well just use tables if you're going to use that many divs.

rimsystems, write your own code and post it to show how you'd do it; if you going to comlain about someone freely contributing to the community.

I wouldn't call it disgusting. HTML/XHTML is disgusting in and of itself. This isn't that bad in comparison.

John: I would not call the markup glamourous (I have never called any markup glamourous, now that I think about it). But, what could I possibly do to make it "prettier"?

I challenge you to create fluid-width layers with rounded corners using a lesser number of tags (while conforming to web standards, of course). I'd love to see it!

trying to have round corners using the background-image technique for a fluid layout I'd say that this article shows the way to do it,
but admittedly having to code 4 levels of empty divs for every 'box' that requires round corners just seems a little bit too much.

Ideally what we want to accomplish here is to have multiple backgrounds on one div. This scenario is specified in the CSS3 draft
ref: http://www.w3.org/TR/css3-background/#layering
but the only browser that supports this feature at the moment is safari.

There is an alternative if you need rounded corners and you feel like cheating a bit , check this out if you havent seen it already:
http://acko.net/blog/anti-aliased-nifty-corners

I only call it a cheat because it uses javascript
;)

Oh, if you simply want rounded borders, as an alternative you can do this the CSS way also (mozilla/FF and safari only)
-moz-border-radius: 15px; /* mozilla/FF */
-webkit-border-radius: 15px; /* safari */

Again there is a W3C CSS3 recommendation of border-radius
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

And that draft has been around since 2002...
I wonder Is this such a demanding feature that the browsers have not implemented it yet (5 years later and counting)
and when they do implement it, it is with some custom css markup instead of the proposed... ah the joy of browsers!

if you want to see how it's done and done right, check out http://fixmysite.blogspot.com/2006/06/tutorial-semantic-liquid-rounded.html

If you really must have rounded corners an don't care about pretty markup, this method is fine. Personally, I don't think round corners are worth it with that much effort and extra non-semantic code. Its a trade off I personally prefer not to make. Others don't mind so much, no big deal. Sorry, I didn't mean to offend anyone.

I have to agree. Doing something like this completely defeats the point of having semantic code to begin with. Might as well just use tables (and <center>).

@Edelman: I dont see how your solution is sematically any different than the one proposed in this post. From the point that empty nested divs are being emplyed to accomodate a visual effect semantics have been broken. I agree that round corners on a *fluid* layout arent worth it really as the standard support stands currently.

@Anastasiosyal: My solution is different because if you ever wanted to include text in those divs, it will not ruin the layout (so long as you don't mess with the padding/margins in the CSS). While the div tag itself is inherently semantically negligible to begin with, you can give it at least some semantic value by giving it a logical ID. This means that, if sometime in the future you wanted to change your layout and no longer wanted fluid rounded corners, you can do so and not have to worry about your markup not making sense anymore.

@Edelman:
I dont think I fully understood what you are trying to say, but if I understand correctly, you are providing different class names to your divs (with the rationale that future changes could occur) , and because of this your solution is different to the one posted here.
In my personal opinion using the naming convention you have employed is misleading, because looking at the html one gets the impression that they can write text between the other three surrounding divs and at the same time retain the layout and the rounded corners. However if some tried to go ahead and add text to those divs as you say, the layout would brake.

One could use the divs as wrapper divs containing textual content only in the case when they eventually decide to ditch the rounded corners. As far as I can see in your example the sole purpose of each individual div is to hold one rounded corner, so you might as well name have named them as blue-top-left etc, at least then it will not potentially mislead a third developer into thinking that they can write content into those divs without breaking the layout.
Please let me know if I am missing something here, and what else is different in your proposed solution than this one posted here.

You could also just use the RoundedCorners extender control in the AJAX Control Toolkit.

CSS:

p {
padding: 0 10px;
}

.wrap {
background: #D92326 url(http://photos1.blogger.com/blogger/5184/3100/320/ul.gif) no-repeat top left;
}

.inner-wrap {
background: transparent url(http://photos1.blogger.com/blogger/5184/3100/320/ur.gif) no-repeat top right;
}

.content-wrap {
background: transparent url(http://photos1.blogger.com/blogger/5184/3100/320/ll.gif) no-repeat bottom left;
}

.content {
background: transparent url(http://photos1.blogger.com/blogger/5184/3100/320/lr.gif) no-repeat bottom right;
}

XHTML:

&lt;div class="wrap">
&lt;div class="inner-wrap">
&lt;p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non odio. &lt;/p>
&lt;p>Maecenas odio velit, posuere non, sagittis at, pharetra id, lorem. In euismod diam in elit tincidunt rutrum. Curabitur pharetra pede a risus. Praesent tempor nisl vitae nunc.&lt;/p>
&lt;div class="content-wrap">
&lt;p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non odio. &lt;/p>
&lt;p>Maecenas odio velit, posuere non, sagittis at, pharetra id, lorem. In euismod diam in elit tincidunt rutrum. Curabitur pharetra pede a risus. Praesent tempor nisl vitae nunc.&lt;/p>
&lt;div class="content">
&lt;p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non odio. &lt;/p>
&lt;p>Maecenas odio velit, posuere non, sagittis at, pharetra id, lorem. In euismod diam in elit tincidunt rutrum. Curabitur pharetra pede a risus. Praesent tempor nisl vitae nunc.&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>

What I did to modify my tutorial example was change 2 things: removed the padding from the innermost div (.content) and defined the p tag to have 10 px of padding left and right. I then added text to each wrapping div. Now tell me how this isn't better.

sorry, i thought it would render < from &lt;. oh well.

<div> :)

oh, i forgot (third post in a row, i know): to control padding left to right, modify the L-R padding of the p tag. to modify the padding top and bottom, modify the .inner-wrap padding-top and the .content padding-bottom.

Edelman, you cant get any clearer than that, and I have to admit that your solution is elegantly right!:)

I was missing the point you were trying to make but this example is pretty clear, didnt expect it to work in all honesty, I was pretty sure that, the layout would break but of course it didnt!
Maybe you should include this example in your post to make it a bit clearer for annoying people like me and save you from some future arguments :D

:) thanks. you're right, i should put this in my post. and cmonnn you're not annoying, just persistent!