Space between divs breaking layout

Question

Let's say I have the following HTML / CSS to have two DIV columns, each with a width of 50 pixels.

<div style="width:100px;margin:0px;"> <div style="width:50px; display:inline-block;">A</div><!-- HERE --> <div style="width:50px; display:inline-block;">B</div> </div> 

In this code snippet, if I have no spaces between the two inner divs (for example, where <!-- HERE --> ):

 <div style="..."> <div style="..."></div><div style="..."></div> </div> 

HTML is then presented in two columns, as expected. However, if I have spaces between them, they are not displayed side by side, because the white space occupies a nonzero width.

The obvious solution for this is to not have spaces between the internal DIVs, however I use HTML auto-formatting to format the HTML code and automatically insert spaces between the two internal DIVs.

Is there any solution for this, so that the two internal DIVs are displayed as expected, even when there are spaces between them?

Answer 1

Add white-space:nowrap; word-spacing:0; white-space:nowrap; word-spacing:0; in a 100px container .

No floats , positioning etc.

 <div style="width:100px;margin:0px;white-space:nowrap; word-spacing:0;"> <div style="width:50px; display:inline-block;background:#efefef;">A a</div><!-- HERE --><div style="width:50px; display:inline-block;background:#ccc;">B b</div> </div> 

Here's the fiddle: http://jsfiddle.net/3yQ6L/2/

Answer 2

What about

 div style="width:100px;margin:0px;"> <div style="width:50px; display:inline-block;">A</div><!-- --><div style="width:50px; display:inline-block;">B</div> 

or if you use php etc.

  div style="width:100px;margin:0px;"> <div style="width:50px; display:inline-block;">A</div><? /* */ ?><div style="width:50px; display:inline-block;">B</div> 

dunno if that helps

Answer 3

You can float the inner divs and add overflow: hidden to the outer:

 <div style="width:100px;margin:0px;overflow:hidden;"> <div style="width:50px; float: left;">A</div> <div style="width:50px; float: left;">B</div> </div> 

http://jsfiddle.net/ambiguous/3yQ6L/1/

Answer 4

Inline-block will behave like an image or text character, so the space between them will depend on the font size.

You can try shifting them to the left or trying to set the font size very low. You can also try the negative left margin in the second margin.