Cannot get widths to work with grid

Question

I am working on playing around with a mini grid and even though my column widths equal up to 100% the third column is wrapping. What am I doing wrong?

http://jsfiddle.net/d866tc0q/

HTML

<div class="row">
    <div class="col-md-7">Here 1</div>
    <div class="col-md-3">Here 2</div>
    <div class="col-md-2">Here 3</div>
</div>

SASS (See JS fiddle for full SASS)

$width = 100%;
$max-col = 12;

.row {
    width: $width;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
}

Thanks

So if I add float left to the columns then it works but I thought inline block would save me from having to put the floats — jrock2004, Jun 02 '15 at 03:18

score 0 · Answer 1 · answered Jun 02 '15 at 03:57

0

Just take a couple pixels off -

.row {
    width: 100%;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
    margin: -2px;
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
    margin: -2px;
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
    margin: -2px;
}

answered Jun 02 '15 at 03:57

jadeallencook

686
1
8
13

1

DRY `%sameStuff { display: inline-block; margin: -2px; } @for $i from 1 through 12 { .col-md-#{$i} { width: percentage(($i / 12)); @extend %sameStuff; } }` ;) – Drops Jun 02 '15 at 08:09

Drops · Accepted Answer · 2015-06-02T08:47:05.820

0

Problem is with whitespaces, easiest solution is to write your html inline:

<div class="row"><div class="bor col-md-7">Here 1</div><div class="bor col-md-3">Here 2</div><div class="bor col-md-2">Here 3</div></div>

Here is fiddle.

Or you can change font-size of parent to 0, and give its children some font-size value ie. font-size: 1em

Last solution could be negative margins on children (as other answer suggested).

Cannot get widths to work with grid

2 Answers2