Two div classes side-by-side - html

Question

Even though I used float, my two div classes do not want to align side-by-side. How to do it?
Basically the entire width is 520px and each box is 250px in width with a margin between the boxes of 20px.
<div id="car-box">
<div class="well-car">
<div class="add_box">
<h1 class="add_heading">car model</h1>
</div>
</div>
<div class="car-brand">
<a class="button" href="www.placehold.it">car brand</a>
</div>
</div>
And CSS:
.car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
float:left
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:left
}
Here Fiddle...Fiddle

Answer 1

Your border width gets added to the content widths. 250+2*10 + 250+2*10 == 540.
(You can read here https://developer.mozilla.org/en/docs/Web/CSS/box-sizing how do browsers calculate block elements' sizes)
For your custom styles it's usually best to set box-sizing: border-box(http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
Edit: and yes, also float:left on the .well-car class, as others pointed out.

Answer 2

You need to float .well-car as well:
http://jsfiddle.net/b3kd9mwf/26/

Answer 3

You just need to add float: left; to your div with the class "well-car".
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}

Answer 4

You are not floating your elements correctly. Class wellcar should be floated to the left and class car-brand should be floated to the right. The following code should work.
#car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:right;
}