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; }
see: https://developer.mozilla.org/en-us/docs/web/css/box-sizing
Comments
Post a Comment