0

I have 2 divs I want to exactly overlap horizontally using negative margin-left.

HTML:

<div id=one></div>
<div id=two></div>

CSS:

body{margin:0px;padding:0px,border:0px}

#one  {width:100px;height:100px;background-color:red;}
#two  {width:100px;height: 50px;background-color:blue;}

#one,#two{display:inline-block;}

#two{margin-left:-100px;}

Before negative margin each div is 100px wide:

enter image description here

After negative margin the divs are 4px from overlapping exactly:

enter image description here

Why does setting a negative margin on the second div not cause it to exactly overlap the first div?

BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.

Thanks in advance for any enlightenment!

JustAsking
  • 157
  • 1
  • 10
  • 1
    http://stackoverflow.com/questions/11982197/mysterious-whitespace-between-inline-block-divs – Paulie_D Jun 19 '14 at 16:08
  • @Paulie_D I now understand that your dup-question-reference tells me that inline-block is causing the alignment difference. I'll leave this question here because future SO visitors might want to know that negative-margins must be adjusted for the inline-block spacing. Thanks! – JustAsking Jun 19 '14 at 16:27

2 Answers2

1

Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).

<div id=one></div> <!-- Here -->
<div id=two></div>

Change the structure of your HTML to remove this space:

<div id=one></div><div id=two></div>

Or you can use comments to negate the line break:

<div id=one></div><!--
--><div id=two></div>
Jason
  • 78
  • 4
0

Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.

margin-left: -104px;

This will fix your issue, but it's also not the only way to fix it.

You could do this... Instead of:

<div id=one></div>
<div id=two></div>

Delete the line-break between the div's so they are this:

<div id=one></div><div id=two></div>

This will also fix the issue.

You could alternatively set the font-size of their containing element to 0.

HTML:

<div class="container">
<div id=one></div>
<div id=two></div>
</div>

CSS:

.container { font-size: 0; }


But wait! There is more. You could comment out the line-break.

<div id=one></div><!--
--><div id=two></div>

You could drop the ending > to the beginning of the next element.

 <div id=one></div
><div id=two></div>
Michael
  • 7,016
  • 2
  • 28
  • 41
  • I believe there was another way using word-space: nowrap or something like that. – Michael Jun 19 '14 at 16:16
  • I see...inline-block makes the html element markup "space sensitive". Thanks! I see how all your solutions work except the font-size solution--why does that work? – JustAsking Jun 19 '14 at 16:17
  • @JustAsking - The 4px space is a product of the line-break, sort of like a space. That size is governed by the size of your font. Obviously the space between letters is dependent on font-size, this is the same way. Setting the font-size to 0 sets everything related to the font, to 0. Consequently that weird 4px space becomes 0 also, and thus, fixes the issue. ;) – Michael Jun 19 '14 at 17:40
  • 1
    Understood...font-size:0 makes any offending spacing zero-width. Thanks again! – JustAsking Jun 19 '14 at 19:24