The most semantic way of making this container

Question

I want to make the following shape using divs and border radius, with fall back to square corners for old browsers. No images please.

I am having a bit of trouble making the bottom corner next to the title (highlighted with the red box). I don't want a lot of unnecessary divs, it has to be as simple and semantic as possible. alt text http://img715.imageshack.us/img715/4214/bradiuswut.gif

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

Any ideas?

EDIT 1:

I did it like this: http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

EDIT 2:

I am going to use this method: http://jsfiddle.net/a93Rb/13/

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won't accept it as an answer as I stated that I do not want images.

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 1

Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.

Answer 2

As many suggested before, dark div with white div inside and border-radius on bottom-left corner. Example here.

The code is rough and should be rewritten, but it works. And you should synchronize div background color with page color.

Answer 3

I'm coming late to the party, but I love a challenge and here is my solution:

http://jsfiddle.net/mtTLu/

Features:

1. No extra markup
2. Falls back to straight corners
3. No images
4. Webkit and Firefox ready.

However, it's terrible css code. If I ever encountered someone who made this to avoid one div of unsemantic code, I'd punch him in the face.

But, I think it fits your constraints.

Answer 4

My idea was white rounded div with dark background under bottom left corner. (I can't get it to work myself, so it would be great to see result :) )

Answer 5

Here is my solution.

I'm sure it is not the best but I did it for leaning purposes I thought it might help someone out!

The "final" result is this:

You can see it working here.

The code goes like this:

HTML

<div id="big">

</div>
<div id="other">

</div>
<div id="small">

</div>


<div id="cont">

</div>

The CSS

#big{
    background-color:#aaa;
    float:left;
    border: 1px solid red;    
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 50px;
    width: 100px;
}

#cont{
    background-color:#aaa;
    float:bottom;
    margin-top:51px;
    border: 1px solid red;    
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 250px;
    width: 300px;
}

#small{
    float:left;
    margin:25px 0 0 -27px;
    border: 1px solid red;    
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
    height: 25px;
    width: 25px;
    background-color:#fff;
}

#other{
    z-index:-1;
    float:left;
    margin:25px 0 0 -1px;
    border: 1px solid red;
    height: 25px;
    width: 25px;
    background-color:#aaa;
}

Hope it helps, good luck!

Answer 6

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won't accept it as an answer as I stated that I do not want images. But here it is: http://jsfiddle.net/a93Rb/13/

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 7

Your question was "the most semantic way". There is nothing semantic about the containers/layout divs of the container. Semantic web means helping others understand different content, such as a table should be a table a list should be a list etc.

On that note you have not marked up elements correctly, be careful of using div tags in replacement of there true meaning.

<div class="whatever_label">
   <h2>Title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <span></span>
   <p>Content</p>
</div>

/* Container of module */
.whatever_label{
}
/* Heading Tab */
.whatever_label h2{
}
/* Radius: Heading Tab */
.whatever_label span{
}
/* Content */
.whatever_label p{
}

A good tip for working out whether a html document is using good semantics, is to turn off css styling in your browser and if it is still logical, it will tend to be semantic.

Edit, this appears to be the cleanest way i could come up with, hope it helps:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box Demo</title>
<style type="text/css">

/* :: Reset default browser stylings.
-------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cite, dfn, ins, kbd, q, code, samp, del, em, var, strong, pre,/* sub, sup,*/
a, abbr, acronym, address, big, font, img, s, 
small, strike, tt, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
body {color: black; background: white;}
ol, ul {list-style: none;}
table{border-collapse: collapse;}

/* Container of module */
.box{
  width:600px;
}
/* Heading Tab */
.box h2{
  float:left;
  font-size:1.0em;
  color:white;
  background: #333;
  height:10px;
  padding:15px 20px 25px 20px;
  margin:0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.box div.radius{
  background: #333;
  float: left;
  height: 25px;
  margin: 25px 0px 0px 0px;
  width: 20px;
}
/* Radius: Heading Tab */
.box span{
  background-color: white;
  -moz-border-radius:0 0 0 10px;
  border-radius: 0 0 0 10px;
  float: left;
  height: 25px;
  margin: 0;
  width: 20px;
}
/* Content */
.box p{
  display:block;
  clear:both;
  color:white;
  background: #333;
  width:560px;
  padding:20px;
  margin:0;
}

</style>

</head>
<body style="margin:20px;">
<div class="box">
   <h2>Whatever title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <div class="radius"><span></span></div>
   <p>Nullam fermentum nibh eget lectus cursus elementum. Vestibulum congue elementum erat, 
    at adipiscing libero blandit sed. Aliquam erat volutpat. Duis feugiat blandit sagittis. 
    Praesent interdum fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc dui nulla, sodales et posuere nec, varius quis nisl. Cras mauris ipsum, commodo sit amet 
    sollicitudin ut, rutrum eget erat. Nullam aliquam, massa et sagittis suscipit, massa erat 
    adipiscing turpis, et luctus metus velit quis ante. Maecenas elementum tristique euismod. 
    Phasellus iaculis arcu eget libero tempor accumsan. Vestibulum at turpis ac dui venenatis condimentum.
    Duis tristique neque at nisi feugiat ac congue nibh luctus. Proin non elit et sapien feugiat dictum nec at diam.
    Quisque quis feugiat velit. Mauris id tortor id ligula vulputate dictum ac vitae elit. 
    Maecenas congue tincidunt leo, ut lobortis mi tempor sit amet. Vestibulum condimentum euismod neque. 
    Vivamus ullamcorper odio ut lacus ullamcorper id pellentesque orci euismod. Ut vitae arcu nulla.
    </p>
</div>
</body>
</html>

Answer 8

You should also consider using dl element.

This HTML:

<dl>
    <dt>..</dt>
    <dd>..</dd>
</dl> 

will have more pure semantics than nested divs, but is probably more awkward with only one "title-content" block.

At last h(1-6) elements will have more semantics than div class="header"

Answer 9

Pete's was the best answer, he was right, the other solutions aren't 'semantic' at all. Its an important distinction and from the way you asked the question, really the most important element of it. Semantic doesn't mean 'simple' it means that the right tags should be used to most closely represent what they contain or describe but without resorting to visual description since that is totally mutable. Same for classes and ids. The div tag, while useful, is probably one of the least semantic tags there is and should be used sparingly.