Two div classes side-by-side

0
votes

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

4
htmlcss
Everyone seems to be missing that it should be #car-box instead of .car-box or class="car-box" instead of id - the way you have it you're not styling the outer div at all so it's not 520px wide (but that's not the only issue) – CupawnTae

4 Answers

1
votes

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.

1
votes

You need to float .well-car as well:

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

0
votes

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; 
}
0
votes

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