CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

Two div classes side-by-side

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

Upvotes: 0

Views: 277

Answers (4)

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

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.

Upvotes: 1

user4982150
user4982150

Reputation:

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

Upvotes: 0

Josh979
Josh979

Reputation: 361

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

Upvotes: 0

HaukurHaf
HaukurHaf

Reputation: 13816

You need to float .well-car as well:

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

Upvotes: 1

Related Questions