CSS Positioning: Creating exact overlap with negative margin is off by several pixels -

CSS Positioning: Creating exact overlap with negative margin is off by several pixels -

i have 2 divs want 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 100px wide:

after negative margin divs 4px overlapping exactly:

why setting negative margin on sec div not cause overlap first div?

btw, i'm experimenting margin-left...i know can absolutely position 2 divs within relative wrapper.

thanks in advance enlightenment!

inline block has weird "bug" phone call it, applies 4px space between elements assuming default font-size. created line-break between div's. you'll find can prepare quite making negative higher.

margin-left: -104px;

this prepare issue, it's not way prepare it.

you this... instead of:

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

delete line-break between div's this:

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

this prepare issue.

you alternatively set font-size of containing element 0.

html:

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

css:

.container { font-size: 0; }

but wait! there more. comment out line-break.

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

you drop ending > origin of next element.

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

css