How to stop scrolling an inline block in a browser

Question

Roughly speaking, trying to build a four-class layout, I have this HTML:

<div> <div>A column</div> <div>A column</div> <div>A column</div> <div>A column</div> </div> 

And I have this CSS:

 div { background: #ccc; } div div { background: #eee; display: inline-block; width: 25%; } 

-> Shut me on this <-

When rendering in the browser (currently I tested only Chrome), spaces between nested div elements (in this example, spaces are caused by line breaks) are rendered, thereby displaying my layout.

Clearly, I can float my nested divs ...

 div { background: #ccc; } div div { background: #eee; width: 25%; float: left; } 

-> Tell me that <-

But then my div container collapses, and I don't want to need to use CSS clearfix hacks or extra HTML to open it.

Alternatively, I can change my HTML to remove the space ...

 <div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div> 

but it makes work difficult. An alternative to hacking tags so that it becomes more readable, for some reason leaves me feeling dirty ...

 <div> <div>A column</ div><div>A column</ div><div>A column</ div><div>A column</div> </div> 

I found a resource or two (I couldn’t find anything in SO), but I don’t really like any of the solutions - are they all workarounds that I will entertain if I have to, but is there an alternative for sure?

So my question (s) ... is there a cross-browser, w3c-compatible, non-javascript, no hacking, neat HTML, hack-safe way to prevent HTML scrolling in the browser when using display:inline-block ? Or is there an alternative to a built-in block that can be used that does not have unpleasant side effects?

EDIT

Assuming this is really not possible, the best solution would be to not add HTML markup and “flexible” CSS. In other words, the webmaster could edit the HTML as usual without taking into account the layout break, and CSS (hacked or otherwise) can accommodate the webmaster in corrections without the need to make changes.

MY "WORKAROUND"

Well, it seems like something was supposed to give. In my situation, it’s more important to have HTML that does not require additional markup, so the best solution is to work in a CSS hack that “just works” invisibly. The solution is to float the nested divs and add a hack ...

 div div { float: left; } div::before, div::after { content: ""; display: table; } div::after { clear: both; } div { *zoom: 1; } 

... which is a derivation of the fix that I have been using for some time and was hoping to avoid. This version of the succint patch was found on this site .

So, now every single div in the markup has received a clearfix fix for it, regardless of whether it is needed or not. I have yet to find out if this has bad side effects by applying to all divs - I look forward to debugging and fixing when there are any problems; -)

Answer 1

You have provided almost all possible solutions for this large layout issue. I just want to point out my preferred solution.

Set the font size of the parent to 0 and set it again using REM again.

You will not have problems with your code and layout if there is no additional text (and not child divs) in the parent div.

REMs (relative EMs) do not refer to the font size of the parent elements (for example, regular EMs), but to the root element of your document - the html element.

HTML:

 <div class="parent"> <div class="child">column 1</div> <div class="child">column 2</div> <div class="child">column 3</div> <div class="child">column 4</div> </div> 

CSS

 html { font-size: 1em; } .parent { font-size: 0; } .child { display: inline-block; font-size: 16px; /* Add pixel-based font-size to support IE8 and below */ font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */ width: 25%; } 

Browser support

• IE8 and below: Add a pixel-based font size to make it work.
• IE9 / 10: does not work with font -shorthand; use font-size instead!
• (Opera Mini and iOS 3.2)

Answer 2

Is there ... a way to prevent the display of HTML space in the browser when using display: inline-block?

Yes, there are several ways. None of them meet your criteria “without hacking” and “accuracy”, but they really work.

• Reformat ("minify") your code so that it does not have spaces between elements.
  This is probably the smallest and cross-browser solution. This is not necessarily clean, but it does mean that you fix your layout by customizing HTML, not CSS, which is not ideal. But it works well. If you want your code to be readable, you could use HTML comments so you can keep spaces, but without them in the DOM:

    <div>block 1</div><!-- --><div>block 2</div><!-- --><div>block 3</div> 

  Still not perfect, but more readable than a massive single line of code.

• Set the font-size to zero for the container and again return to the full size for the blocks.
  It works very well. This is a clean CSS solution and easy to make. The downside is that it can be difficult to work with them if you have relative font sizes (i.e. setting back to 14px fine, but setting to 1em will not work because 1em previous font size is from zero anyway equal to zero).

• Set a negative margin of 1em to close the gap.
  This also works very well, but may be inaccurate.

Or is there an alternative to a built-in block that can be used that does not have unpleasant side effects?

• Always float:left . But this had a number of different problems. If you use inline-block , the chances are good because you do not want to use float.

• Use position:absolute and make the layout manually.

Answer 3

You can use the float method that you described in your question, but you did not clear your floats, so the container is destroyed.

A good method is to use the attribute of the ::after pseudo-element of the container element for self-cleaning:

  div:after { content: ""; display: table; clear: both; } 

http://jsfiddle.net/s2rJW/3/

Answer 4

When I saw your “workaround”, I thought: why don't you use <table> ?

And then I realized this:

 div { background: #ccc; display: table; width: 100%; } div div { background: #eee; display: table-cell; width: 25% } 

 <div> <div>A column</div> <div>A column</div> <div>A column</div> <div>A column</div> </div>