Two 50% width divs don't fit in parent

Question

Sorry if it is a duplicate of something, I have searched honestly, but I still have the problem which is shown in this fiddle: http://jsfiddle.net/tfvdzzee/1/

The code here:

html

<div id="wrap">
    <div id="one">1</div>
    <div id="two">2</div>
</div>

css

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#one, #two
{
    width: 50%;
    background: green;
}
#two
{
    float: right;
    background: red;
}

Answer 1

I believe display: inline-block; is the best answer, as it prevents bugs of overlapping and overflowing, while also keeping its parent definitions.

JsFiddle Demo

HTML

<div id="wrap">
    <div id="one">1</div><!--
 --><div id="two">2</div>
</div>

CSS

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}

#one, #two
{
    width: 50%;
    background: green;
    display: inline-block;
    /* If worried about IE7 and IE6, add the two next lines */
    *display: inline;
    *zoom: 1;
}

#two
{
    background: red;
}

Answer 2

Demo Fiddle

You need to both float:left the #one element as well as set overflow:hidden to the parent to ensure it wraps the children correctly.

Change your CSS to:

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
    overflow:hidden; /* <---ensure the parent wraps the children */

}

#one, #two
{
    width: 50%;
    background: green;
    float:left; /* <---ensure the children display inline */
}

#two
{
    float: right;
    background: red;
}

Answer 3

Add the following style in your CSS.

 #one{float:left}

DEMO