CODEWITHSUNDEEP
csstwitter-bootstrap-3css-float
ShambalaG
ShambalaG

Reputation: 356

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

Upvotes: 2

Views: 309

Answers (2)

Jay Fridge
Jay Fridge

Reputation: 1057

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.

Upvotes: 3

Tony Hensler
Tony Hensler

Reputation: 1492

Is this what you are looking for?

https://jsfiddle.net/5wc53zkz/

Updated

.row, .form-group {
  margin-left: -15px;
  margin-right: -15px
}

Upvotes: 0

Related Questions