CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
the_velour_fog
the_velour_fog

Reputation: 2184

Why aren't these floated columns sitting along side each other?

I am trying to build a simple grid system based on twitter bootstrap, I have it close, below the 768px media query breakpoint the layout is correct, but the columns are not sitting alongside each other above the media query breakpoint.

HTML

<div class="container-fluid">
  <div class="row">
    <section class="col-sm-6" style="background-color: gainsboro;">
      <img  src="http://lorempixel.com/150/150" alt="" />
    </section>

    <section class="col-sm-6" style="background-color: cadetblue;">
      <h1>King Arthur</h1>
      <p>Why? But you are  dressed as one&hellip; Why do you think that she is a witch? Well, how'd you become king, then? We shall say 'Ni' again to you, if you do not appease us. She looks like one.</p>
      <hr>
      <br/>
      <form action="" method="post">
        <fieldset class="form-group">
          <label for="category">
            Category
          </label>

          <select name="category" id="rate-category" class="form-control">
            <option value="some value">option 1</option>
          </select>
        </fieldset>
        <br/>
        <input class="btn btn-primary btn-block" type="submit" value="go" />

      </form>
    </section>
  </div>
</div>

CSS

body {
    font-family: sans-serif, arial;
    font-size: 16px;
    margin: 0;
    padding: 0;
}


.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Apply Nicholas Gallagher's "microclearfix"
 */
.container-fluid:after {
    content: "";
    display: table;
    clear: both;
}

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

.row:after {
    content: "";
    display: table;
    clear: both;
}

 .col-sm-6 {
  /*position: relative;*/
  min-height: 1px;
  padding-right: 15px;
  padding-left:  15px;
}

@media (min-width: 768px) {
  .col-sm-6 {
    float: left;
  }

  .col-sm-6 {
    width: 50%;
  }
}

Demo

I have setup a codepen

What do I need to do to get these columns floating up alongside each other?

Upvotes: 0

Views: 41

Answers (1)

bumerang
bumerang

Reputation: 1846

Becouse of padding you put 30px extra to Your .col-sm-6. You should update Your class and add box-sizing: border-box; this will include padding to element width:

.col-sm-6 {
  /*position: relative;*/
  min-height: 1px;
  padding-right: 15px;
  padding-left:  15px;
  box-sizing: border-box; // This will include padding to element width
}

Here is codepen: http://codepen.io/anon/pen/ZbpbeY?editors=110

Upvotes: 1

Related Questions