html - How to ensure that columns are contained within a row -


i'm trying create css grid system 6 columns. can see output of html , css at jsfiddle. problem appears columns overflowing rows supposed contained in. example, though row should able hold 6 'size 1' columns, sixth column in example spilling on row. how fix desired number of columns each row doesn't exceed width of row?

<div class="grid-container outline">         <div class="row">             <div class="col-1"><p>col-1</p></div>              <div class="col-1"><p>col-1</p></div>              <div class="col-1"><p>col-1</p></div>              <div class="col-1"><p>col-1</p></div>              <div class="col-1"><p>col-1</p></div>              <div class="col-1"><p>col-1</p></div>          </div>          <div class="row">             <div class="col-2"><p>col-2</p></div>              <div class="col-2"><p>col-2</p></div>              <div class="col-2"><p>col-2</p></div>          </div>          <div class="row">             <div class="col-3"><p>col-3</p></div>              <div class="col-3"><p>col-3</p></div>          </div>      </div> 

css

.grid-container{     width: 100%;      max-width: 1200px;       }  /*-- cleafix hack -- */  .row:before,  .row:after {     content:"";       display: table ;     clear:both; }  [class*='col-'] {     float: left;      min-height: 1px;      width: 16.66%;      /*-- gutter -- */     padding: 12px;      background-color: #ffdcdc; }  .col-1{ width: 16.66%; } .col-2{ width: 33.33%; } .col-3{ width: 50%;    } .col-4{ width: 66.66%; } .col-5{ width: 83.33%; } .col-6{ width: 100%;   }  .outline, .outline *{     outline: 1px solid #f6a1a1;  }  /*-- column content styling --*/ [class*='col-'] > p {  background-color: #ffc2c2;   padding: 0;  margin: 0;  text-align: center;   color: white;  } 

i believe you're looking for:

div {     box-sizing:border-box; } 

jsfiddle example

see: https://developer.mozilla.org/en-us/docs/web/css/box-sizing


Comments

Popular posts from this blog

How to run C# code using mono without Xamarin in Android? -

c# - SharpSsh Command Execution -

python - Specify path of savefig with pylab or matplotlib -