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

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

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!