Question

I currently have two divs on my site:

Notice that both have border [same color as the div] and they also have border radius.

I want to achieve this:

So I want them to join. How can I make this happen? If I can do it, is pure CSS and HTML enough or do I need jQuery and JS as well?

I though of making one large div of the two and then just setting a background that is similar to the two being united, but this is a not perfect for me because I have another object immediately below div 2.

So how can I do it?

Thanks in advance.

Answer 1

Set the divs next to each other and remove the border-radius from the big div’s top right corner and from the left side of the smaller one.

#big {
    float:left;
    width:100px;
    height:100px;
    background-color:gray;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

#small {
    float:left;
    width:50px;
    height:50px;
    background-color:gray;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

See http://jsfiddle.net/jxMW9/ for a demo.