Два класса div бок о бок

Question

Несмотря на то, что я использовал float, мои два класса div не хотят выравнивать бок о бок. Как это сделать? В основном ширина составляет 520 пикселей, а каждая коробка - 250 пикселей в ширину с разницей между ящиками 20 пикселей.

<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> 

И 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 
} 

Здесь Скрипки ... Fiddle

Answer 1

Ваша ширина границы добавляется к ширине содержимого. 250+2*10 + 250+2*10 == 540.

(Вы можете прочитать здесь https://developer.mozilla.org/en/docs/Web/CSS/box-sizing как браузеры вычислить размеры блочных элементов)

Для пользовательских стилей обычно лучше всего установить box-sizing: border-box (http://www.paulirish.com/2012/box-sizing-border-box-ftw/)

Edit: и да, и float:left на класс .well-car, как указывали другие.

Answer 2

Вы должны плавать .well-car, а также:

http://jsfiddle.net/b3kd9mwf/26/

Answer 3

Вам просто нужно добавить поплавок: левый; к вашему div с классом «well-car».

.well-car { 
width:250px; 
height:250px; 
border:10px solid red; 
float: left; 
} 

Answer 4

Вы не плаваете ваши элементы правильно. Класс wellcar следует поместить в left, а класс car-brand должен быть погружен в right. Следующий код должен работать.

#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; 
}