Cannot bridge the gap between two horizontal divs inside inside a div

Question

It should be easy, right? Just set the outer wrapper of the div to zero and set the two side-side divs inside the outer div to have margin: 0, but without affecting the space between the two horizontal divs. I need a red-outlined left div to touch the green outlined right side div.

Despite my efforts using padding and margins, the space between the two divs will not disappear.

I looked through many answers on SO, but so far no one has broken them into this simple example - my violin shows this problem,

http://jsfiddle.net/Shomer/tLZrm/7/

And here is a very simple code:

<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%"> <div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy </div> <div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy </div> </div> 

Answer 1

Try the following:

 <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 2

The space between your divs is a space (represented as dots), minimized to:

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

Instead, try encoding as follows:

  </div><div> 

and the space will disappear.

Answer 3

Use the float property.

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

Answer 4

A space in the source between the built-in blocks leads to a gap in the layout. By deleting the space (regardless of whether it is one space or some line breaks does not matter), the elements will touch as intended.

Code formatting can be saved at a low cost, either by commenting out spaces, or by skipping spaces in tags.

Using comments:

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

Placing a label inside a line:

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

Answer 5

As @Juan Lanus said in his answer, this is a gap causing your problem.

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

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