8

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>
wantTheBest
  • 1,542
  • 4
  • 40
  • 65

5 Answers5

21

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.

Community
  • 1
  • 1
Juan Lanus
  • 2,037
  • 22
  • 15
11

Use the float property.

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

GG.
  • 17,726
  • 11
  • 69
  • 117
5

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>
HulkingUnicorn
  • 579
  • 5
  • 9
3

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>
Nick Zimmerman
  • 1,321
  • 9
  • 10
  • I added that to my code -- it works. I have not used 'float' with 'display:inline-block', didn't know you could do that, I thought you either used one or the other -- lesson learned. I'm still not sure though why the padding:0 and margin:0 I tried has zero effect. I added a clear:both div right below and the rest of my code is A-OK -- thank you. – wantTheBest Nov 27 '11 at 02:01
  • If you read my comment -- when I looked at your jsfiddle there was just a float in curly braces in a completely different window on the jsfiddle screen. However Nick put the code *in context* -- I didn't have to guess as to why my code behaved differently. Again I did up-arrow you. If want to explain how your float in the curly braces in a separate window of jsfiddle solved my problem let me know -- I still do not see the connection -- what I got from your answer was 'use float' but there was no context I could grasp, sorry I'm new to CSS (3 days only) and new to jsfiddle (1 day only). – wantTheBest Nov 27 '11 at 07:19
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.

Lindsay-Needs-Sleep
  • 916
  • 1
  • 11
  • 22