cannot eliminate space between 2 horizontal divs inside containing div

Question

Should be easy, right? Just set the outer containing div\'s padding to zero, and set the two side-by-side divs inside the outer div to have margin:0 but that\'s having no effe

Answer 1

Like @Juan Lanus said in his answer, it is the whitespace causing your issue.

An additional solution is to set font-size: 0px on the containing div.

But you will need to then also set font-size: initial (or to a non-zero value) on the children div so you can still see your text.

Answer 2

The space rendered between your divs is the whitespace (represented as dots), collapsed, in:

    </div>.  
.................  
....<div>

Instead, try coding like this:

    </div><div>

and the gap will vanish.

Answer 3

The whitespace in the source between inline blocks leads to a gap in the layout. By removing the space (whether it's a single space or some line breaks doesn't matter) the elements will touch as intended.

Formatting of the code can be retained at a slight cost, either by commenting out the whitespace or by making the whitespace occur within tags.

Using comments:

<div>
   <div>Content</div><!--
   --><div>Content</div>
</div>

Placing linebreak inside tag:

<div>
   <div>Content</div
   ><div>Content</div>
</div>

Answer 4

Try this:

<div style="border: 4px solid blue; margin:0; padding:0; width:80%; height: 50px;">

   <div style="float:left; display:inline-block; width:45%; overflow:hidden; border: 1px solid red;"> Flimmy-flammy
    </div>

    <div style="float: left; display:inline-block; width:50%; overflow:hidden; border: 1px solid green;"> Hambone-Sammy
    </div>

</div>  

Answer 5

Use the float property.

Example with div { float: left; } : http://jsfiddle.net/tLZrm/10/.