2

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;
}
ShambalaG
  • 356
  • 1
  • 7
  • 21

2 Answers2

3

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.

Jay Fridge
  • 1,017
  • 11
  • 13
0

Is this what you are looking for?

https://jsfiddle.net/5wc53zkz/

Updated

.row, .form-group {
  margin-left: -15px;
  margin-right: -15px
}
Tony Hensler
  • 1,482
  • 5
  • 15
  • 30
  • Not quite but nearly. Looking at https://getbootstrap.com/css/#grid they don't add the negative margin meaning content within form-group should be padded and not butted right up against the edge. – ShambalaG Oct 06 '16 at 15:16
  • @ShambalaG adding to that: bootstrap has `border-box` applied for all elements using `* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }`.... [this](http://stackoverflow.com/questions/39129811/add-border-to-div-increase-div-width/39130170#39130170) has more explanation... – kukkuz Oct 06 '16 at 15:34
  • Thanks all for the help. Seems so obvious now. – ShambalaG Oct 06 '16 at 15:59