html - grid system with floats and max-width issue -
could have @ code , tell me needs fixed make div elastic without using flexbox. here code pen
h1 { margin:0; } .container { background-color:blue; padding:1em 0; .row { background-color:gold; padding:1em 0 0; [class*="col-"] { border: 1px solid red; box-sizing: border-box; float:left; width:100%; } } .row:last-child { padding-bottom:1em } .row:before, .row:after { display: table; content: " "; } .row:after { clear:both; } } .container { $base_width: 8px; max-width: $base_width * 8 * 12 - $base_width * 2; margin:0 auto; .row{ margin:0 -#{$base_width}; /*display:flex; align-items: middle;*/ @for $i 1 through 12 { .col-#{$i} { max-width: $base_width * 8 * $i - $base_width * 2; margin: 0 $base_width; } } } } <div class="container"> <div class="row"> <div class="col-6"><h1>1/4</h1></div> <div class="col-6">1/4</div> </div> <div class="row"> <div class="col-3">1/4</div> <div class="col-3">1/4</div> <div class="col-3">1/4</div> <div class="col-3">1/4</div> </div> </div>
Comments
Post a Comment