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 to make the slider move right and left alternatively

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to add content to an input with css? [duplicate]

    css how to make this checkbox smaller

    How to add transition to CSS3 Animation steps

    how to choose correct css class to change element

    CSS how to use pseudo-class :not with :nth-child

    CSS gone wild - how to stop a style from going too far

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    How to make corners of progress bar round in css

    How can I show an attribute as text with CSS?

    How to override bootstrap styles?

    How to change the colors of HTML form elements displayed in UIWebView?

    How to avoid gaps using Isotope with Masonry layout sortby random

    CSS How to keep bodies of html file and included files from merging?

    How to call particular CSS file only for desktop not for mobile [closed]

    How does reddit create the top header without any margins?

    Superfish: How to keep sub menu open after it has been clicked

    How can I select first element with a specific class

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How do i add and remove an active class with jQuery?

    How do I add extra slides to this pure CSS text rotator?

    How to load CSS on PC and Mobile by jQuery?

    How can I make my web page load faster?

    How to create dynamic CSS based on user input

    How to specify background image height in div Container

    How to put horizontal dropdown menu bar

    CSS how to align elements

    Bootstrap How to make a responsive grid degradating in two steps?

    How to set Height of a table in a Bootstrap as the value of Width using CSS?