2

I want to have several block elements next to each other, which take the full browser width.

With white-space: nowrap, it works quite well, but there is a random space of a few pixels in between one element and another:

body { margin: 0; padding: 0; }
#container1 { white-space: nowrap; position: absolute; width: 100%; }
#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1">
    <div style="background: red;"></div>
    <div style="background: yellow;"></div>
    <div style="background: green;"></div>
    <div style="background: blue;"></div>
</div>

Here is the jsBin Demo.

It is no padding, no margin, no border, no offset.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Christoph Bühler
  • 2,795
  • 2
  • 28
  • 43

3 Answers3

6

That's because of a space character between inline(-block) elements (a line break and a few tabs counts as a space), This could be fixed by commenting that space out this way:

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

Online Demo.

Actually, it's not a bug, it's the normal behavior of the inline elements; Just like when you place an image next to a line of text, or put a button next to an input element.

There are couple of ways to remove the space between inline(-block) elements:

  • Minimized the HTML
  • Negative margins
  • Comment the white space out
  • Break the closing tag
  • Set the font size of the parent to zero then reset that for children
  • Float the inline items instead
  • Use flexbox

Check the Chris Coyier's Article, or these similar topics on SO:

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
4

I've faced this problem once and I used this CSS property. sometimes its help.

font-size:0;

Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26
0

Just try and have all the div's into single each. Sometimes white-space doesn't work as what we want.

http://jsbin.com/peqevamu/8/

Paktolus Solutions
  • 1
  • 1