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 effect on the space between the 2 horizontal divs. What I need is the red-outlined left div
to touch the green-outlined right-side div.
Despite my effort using padding and margin, the space between the 2 divs will not go away.
I have looked at many answers on SO but so far no one's broken it down
to this simple example -- my fiddle shows this issue, at
http://jsfiddle.net/Shomer/tLZrm/7/
And here is the 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>
