Spacing between inline-block divs, can't solve by removing whitespace

Question

I know this question has been asked on SO before, and the answer is usually to remove any spaces between the markup. In this case, I can't, since I'm programatically printing out divs:

<div class="products row">
  {{#each products}}
    {{> product}}
  {{/each}}
</div>

I won't bore you with the details of the product template, but suffice it to say, the template engine will dump out divs with either a space or newline in between each one.

What I'm trying to do is just close those gaps so I get all six divs in a row (no wrapping). Also, the divs need to be centered within the page (or their container). So whether I have two divs or six, they should always be centered.

Here's a JSFiddle showing the divs with bad spacing:

http://jsfiddle.net/6opf8ybs/

Is there some way to fix this in CSS? I heard the font-size: 0 trick is not ideal.

HTML:

 <div class="container">
    <div class="row row-center">
      <div class="col-xs-2 col-center">b</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">b</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">d</div>
    </div>
  </div>

CSS:

.row-center {
  text-align: center;
}

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  float: none;
}

Edited! I want to remove the spacing so the last div doesn't wrap to a new line — ffxsam, Aug 26 '15 at 19:24
Huh? I'm not seeing that on your JSBin on Windoze/Chrome.. All output is on a single line... — zipzit, Aug 26 '15 at 19:26
Sigh. Someone keeps editing the JSbin. Look at the code above instead. — ffxsam, Aug 26 '15 at 19:26
Great sales pitch for jsfiddle... You know how to add CDN content to jsfiddle on left hand margin, no? — zipzit, Aug 26 '15 at 19:27
This is precisely why I maintain that `display: inline-block` is not suited for block layout. It's in the name: **inline**-block. The whitespace is there for a reason. Using inline-block for a layout then trying to remove inter-element whitespace after the fact is like building a house out of cheese and then trying to plug all the holes so water doesn't come out and walling up the cheese (*after* you've plugged the holes) so mice don't gobble it all up. — BoltClock, Aug 26 '15 at 19:31
@BoltClock What's the alternative though? I need the divs side-by-side. But I can't use `float: left` otherwise the centering goes away. Whether there are three divs in that row or six, they need to be centered within the page. — ffxsam, Aug 26 '15 at 19:32
Well I maintain, that a house built out of cheese sounds delicious. Especially Parmesan. — TomSlick, Aug 26 '15 at 19:32
@TomSlick: All the more reason you don't want the mice getting to it before you do I suppose. — BoltClock, Aug 26 '15 at 19:34
Is this a mobile issue? I'm seeing the last element jump lines when the line width is less than 195 pixels or so... — zipzit, Aug 26 '15 at 19:42

cocoa · Answer 1 · 2015-08-26T19:38:29.890

1

Edit: What if you changed the container display to flex?

.container {
  display: flex;
  align-content: center;
  justify-content: center;
}

http://jsfiddle.net/toodgqmm/2

edited Aug 26 '15 at 19:38

answered Aug 26 '15 at 19:32

cocoa

3,806
7
29
56

2

`float: none` isn't really the "issue" so much as you can't float an inline-block. When you set `float: left` you're effectively removing the inline-block. – BoltClock Aug 26 '15 at 19:33
Sorry, I edited my post to clarify. The divs need to appear centered on the page. – ffxsam Aug 26 '15 at 19:33
Bootstrap, 2 times 6 = 12... what am I missing? – zipzit Aug 26 '15 at 19:36
They look centered to me. – TomSlick Aug 26 '15 at 19:37
@zipzit Missing as far as what? Why it wraps? – ffxsam Aug 26 '15 at 19:38
Ah... it looks like if I drag the element narrower than 195pixels, the last element jumps to a new line... Are you on a really narrow mobile phone? – zipzit Aug 26 '15 at 19:38
That wrapping is inherent in bootstrap. It's going to happen at some point. Am I the only one who's still not grasping the issue here? – TomSlick Aug 26 '15 at 19:41
The issue is that all six divs should fit on the same row, and NOT wrap. I also want the divs to be centered on the page, hence changing the columns to `inline-block` and removing the float. So if I have three divs, they should center. If there are six, it should center. But when I hit six, it wraps due to spacing inserted between divs thanks to `inline-block`. – ffxsam Aug 26 '15 at 19:43
Sorry, someone miscopied my code into the fiddle. ARGH!! – ffxsam Aug 26 '15 at 19:46
@cocoa flexbox would be awesome, and that works, but not on IE10 which I need to support. – ffxsam Aug 26 '15 at 20:05
darn...i love flexbox. and not ie – cocoa Aug 26 '15 at 20:34

score 1 · Accepted Answer · answered Aug 26 '15 at 19:39

1

You could ty using a negative margin on the inline-block items. Take a look at this jsFiddle

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  margin: 0 -2px;
  padding: 10px;
}

answered Aug 26 '15 at 19:39

Jackson

3,476
1
19
29

1

I've heard that using negative margins is not ideal, but in this case it gets the job done (also on IE10). Thanks! – ffxsam Aug 26 '15 at 20:17

zipzit · Answer 3 · 2015-08-26T20:06:12.743

0

Let Bootstrap do its thing. I'd recommend checking how many elements there are on a line, from within your code (JS). If two elements they code out as

<div class="col-xs-6 col-center">b</div>
<div class="col-xs-6 col-center">d</div>

if you have four elements they code out as

<div class="col-xs-3 col-center">b</div>
<div class="col-xs-3 col-center">d</div>
<div class="col-xs-3 col-center">b</div>
<div class="col-xs-3 col-center">d</div>

etc.... 1*12 = 2*6 = 3*4 = 12... let Bootstrap work for you. Obvious 5 elements in a single line will be a problem... (I'm assuming 6 elements max...)

Uh-oh.. is this an angular generated listing? Have you looked at the stackoverflow tag angular-ui-bootstrap?

edited Aug 26 '15 at 20:06

answered Aug 26 '15 at 19:50

zipzit

3,778
4
35
63

Nope, not Angular. Meteor. – ffxsam Aug 26 '15 at 20:05
I like the idea of changing the column widths but that would introduce a bunch of other issues I know my client would not like. I gotta stick with that exact column width. – ffxsam Aug 26 '15 at 20:06

score 0 · Answer 4 · answered Aug 26 '15 at 19:57

0

Simply you can use negative margin value like this below:

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  float: none;
  margin-left:-2.5px;
  margin-right:-2.5px;
}

answered Aug 26 '15 at 19:57

Sarower Jahan

1,445
1
13
20

score 0 · Answer 5 · answered Aug 27 '15 at 10:23

I recently found a solution to this problem:

.row-center {
  display: table;
  word-spacing: -2em;
  width: 100%;
}

.col-center {
  display: inline-block;
  word-spacing: normal;
  *display: inline;
  *zoom: 1;
}
.col-center:before {
  content: '';
  display: block;
}

I made an article about it and how it works: http://cahnory.tumblr.com/post/127631188627/effectively-remove-whitespaces-between

Spacing between inline-block divs, can't solve by removing whitespace

5 Answers5

Linked