Two 50% width divs don't fit in parent - html

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

Answer 4

Remove the Css property for #two and add this
#one, #two
{
width: 50%;
background: green;
float: left;
}

Answer 5

Use float: left and you don't need float: right for #two.
#one, #two
{
width: 50%;
background: green;
float: left;
}
#two
{
background: red;
}
Fiddle example.

Answer 6

You will need to float both your divs. After the float, clear the float using the clearfix class.
CSS:
#one, #two{ float:left; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
HTML:
<div id="wrap" class="clearfix">
<div id="one">1</div>
<div id="two">2</div>
</div>
DEMO

Answer 7

#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#wrap:after{
clear:both;
content:"";
display:block;
}
#one, #two
{
width: 50%;
float:left;
background: green;
}
#two
{
background: red;
}
Try this and use clearfix on the :after pseudo element of your #wrap div.
DEMO

Answer 8

To Expand on the comment by sifu and answer the question in a choice of ways
The first method (Using float's)
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one,#two
{
float:left;
width:50%;
}
http://jsfiddle.net/tfvdzzee/7/
Display Inline-block method
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
font-size:0px;
}
#one,#two
{
width:50%;
display:inline-block;
font-size:16px;
}
http://jsfiddle.net/tfvdzzee/8/
Both methods can be used however if you are still developing for IE7 (not sure why you would) then method 2 wont work.