3

I'm attempting to use a css grid with widths set in % (so I can use it responsively) and without using floats (personal dislike!).

In this instance, I'm using csswizardry-grids with the appropriate variables added in. You can view the demo linked on the github page.

There is no mention of a "container" class to assign a width to the grid, so I added .container (which is also what the csswizardry-grids demo has) with a max-width (in prep for other breakpoints later). The container has left and right padding to allow for the padding:left on the .grid__item within.

.container {
    margin: 0 auto;
    padding: 0 $gutter;
    max-width: 960px;
}

The scss:

.grid__item {
    display: inline-block;
    padding-left: 32px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desk--one-third { width: 33.333%; }

Also note that the box-sizing:border-box is not on any other element except that which is spec'd by the csswizardry-grids.scss.

My markup: 

<div class="container"> 
    <div class="grid">
        <div class="grid__item desk--one-third">
            <h1>Column 1</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 2</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 3</h1> 
        </div>
    </div>
</div>

The problem: in firefox, safari & chrome, the last .grid__item falls away.

What I see: a mysterious gap between '.grid__item's of at least a few pixels. See attached screenshot:

!(http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png)

Can anyone shed some light on this for me please?

Matt Coughlin
  • 17,170
  • 3
  • 42
  • 57
Callum Flack
  • 399
  • 1
  • 4
  • 11
  • Could you please add the CSS for `grid__item` and `desk--one-third` to the question? I'm assuming the columns are `inline-block`, even though the title currently says `inline`. – Matt Coughlin May 09 '13 at 19:49

3 Answers3

15

Whitespace between inline-block elements

It sounds like you're using display: inline-block for the columns, rather than floating them.

The problem with using inline-block for layout is that if there's any whitespace in the HTML source code between the HTML tags (in this case, the grid__item divs), there will be 3-4 pixels of horizontal spacing added between the displayed elements.

inline-block was intended for adding block content to the flow of a paragraph. The reason this spacing occurs is the same reason that 3-4 px are added between 2 words in a paragraph: It gives a series of inline elements in a paragraph the amount of spacing they're usually expected to have.

There's no CSS solution for this that's truly cross-browser and safe (though negative left margins come the closest). There are ways to edit the HTML code to prevent this (removing the whitespace between the tags in the source code), but they present maintainability issues (with a high risk of difficult-to-identify issues turning up later on when someone else works on the code), and it significantly compromises the separation of content and presentation (given that changes to the formatting of the source code can affect the formatting of the displayed pages).

Comparison of inline-block and floats

Both floats and inline-block have the disadvantage of not having been intended for general layout (e.g., creating variable-height columns in the flow of a page). It could be argued that CSS positioning and HTML tables were not intended for general layout either (or at least are not well suited for it).

The natural uses for each:

  • Floats: Allowing a paragraph of text to flow around an element (usually an image)
  • inline-block: Adding block content inside a paragraph (like an image), as part of the paragraph
  • CSS positioning: Overlaying one element on top of another (usually a pop-up or dropdown)
  • HTML tables: Data grids

Historically, each of these has been forced into use for layout, due to the lack of other options. As Eric Meyer pointed out here and here, the reason floats wound up being used for layout was because of the ability to clear a float (which allows it to be used in a wider variety of ways).

Choosing the right tool

So if neither one was intended for general layout, how do you choose the best one to use?

The strongest argument against inline-block, on the whole, is that if it were truly suitable for general layout, there wouldn't be such a fundamental issue as the 3-4 px of horizontal spacing added between elements (which is almost never desired when laying out the main regions of a page -- columns shouldn't behave the same as words in a paragraph of text).

In specific situations, a simple rule can be applied: For cases where that 3-4 px creates a problem, that indicates that the use of inline-block is inappropriate. Likewise, for cases where the 3-4 px does not create a problem, that suggests that it may be a reasonable option.

In practice, I've found floats to be far more reliable and predictable than inline-block, especially on earlier versions of IE. The main hassle with floats is having to manually clear them. Adding a reliable clearfix to the CSS file makes doing so relatively manageable though. Even on modern CSS grid systems, the preferred layout mechanism for establishing columns is typically floats (based on what I've seen so far).

Community
  • 1
  • 1
Matt Coughlin
  • 17,170
  • 3
  • 42
  • 57
  • The problem was indeed whitespace between 'inline-block' elements — cheers for both answers. @Matt, I appreciate the low-down on 'inline-block': knowing the context allows me to see 'floats' in a different way. And just that small whitespace removal on the html really makes it difficult to read. – Callum Flack May 10 '13 at 00:26
  • @user1462487: I did some additional research and edited the answer. The overall recommendation is still the same, but there's a little more info to consider. – Matt Coughlin May 10 '13 at 16:40
  • Thanks again, I appreciate it. IMO, there's been a slight lean towards inline-block but this issue and your rundown provides good reasons against it. Hopefully flexbox will simplify things. – Callum Flack May 14 '13 at 06:32
1

This was the first link when I searched "space between inline": http://css-tricks.com/fighting-the-space-between-inline-block-elements/

tl;dr remove any spaces between your columns.

MatTheCat
  • 16,312
  • 6
  • 52
  • 66
0

This issue is caused by inline-block elements being considered as words - so it can be simulated by giving a negative word-spacing to the wrapping element. About word-spacing: -4px; worked for me Chrome/IE9/FF :) - However - remember - this is a workaround.

HTML:

<div class="wrapper">
    <div class="inliner">01</div>
    <div class="inliner">01</div>
    <div class="inliner">01</div>
</div>

CSS:

.inliner{ display: inline-block; }
.wrapper{ word-spacing: -4px; }
jave.web
  • 11,102
  • 9
  • 70
  • 98