ShambalaG ShambalaG - 2 months ago 11
CSS Question

CSS floated columns with negative margin on parent div are stacking

Trying to replicate Bootstrap columns without all the extra code that ships with the html framework.

Simple html and css that I have done before but for the life of me I can't figure out why these won't float and sit side by side.

Two columns with 50% width and 15px padding, parent div called 'row' with -15px margin and a container with 15px. Why can't I get this working?

JS Fiddle here

HTML:

<div class="container">

<div class="form-row row clearfix">
<div class="form-group col-sm-6">
test
</div>
<div class="form-group col-sm-6">
test
</div>
</div>

</div>


CSS:

.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
.row {
margin-left: -15px;
margin-right: -15px
}
/*COLUMNS*/
@media (min-width: 768px) {
.col-sm-6 {
width: 50%;
}
.col-sm-12 {
width: 100%;
}
}

/*FORM*/
.form-group {
padding: 0 15px 15px 15px;
float: left;
background: blue;
}

Answer

The Padding of the boxes is adding to their width.

.form-group {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

This prevents that from happening.