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 ma

Answer 1

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.

   
Title
 
   
   
Content


/* 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:

   
Whatever title
 
   

   
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.