How could I join a smaller and a bigger div with rounded edges?


Tags: css,html

Problem :

I currently have two divs on my site:

current

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

I want to achieve this:

enter image description here

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.



Solution :

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.


    CSS Howto..

    How do you make a nav bar “sticky”?

    How to remove hover state

    How do you skew a div and keep the background image unskewed

    How to make a background-color transition that eventually covers div to center? [closed]

    How to make floated columns stretch to fill container vertically?

    How can I set a specific border around an element?

    How to add tags/images on javascript fetched textarea data?

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    Why are items showing up in my instead of [closed]

    Table cells without borders having white lines - how do I disable them?

    How to create a clickable block?

    How to add sub-menu (css) under actual sub-menu in WordPress

    How to make this CSS to be in the middle?

    How to revise the css transitions with a delay

    How to make an image hover over another?

    PNG image showing up with white background even though it has a clear background

    ExtJS - How to style disabled buttons?

    How to override css attribute-only style

    How come the first

    How is struts finding css files?

    How to align text next to a “div” in HTML/CSS?

    How to Slant/Skew only the bottom of the div

    What shape is this, and how can i achieve it using css?

    how to show css text in html div

    How to make my SVG map render correctly in the browser?

    How to apply CSS class to a split string

    how to add style to form under echo statement by css [closed]

    How to style the last element before another specific element in CSS? [duplicate]

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How to overlap items in an unordered list using CSS?