Question

I get an unwanted margin between block1 and block2 with display: inline-block style. See this jsFiddle.

HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #f00;
    width: 100%;
    height: 200px;
}
#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;
}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;
}

The margin disappears when I change the HTML to this:

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><div id="block2">
            block2
        </div>
    </div>
</div>

or this:

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><!--
     --><div id="block2">
            block2
        </div>
    </div>
</div>

While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in innercontainer. Also note that I want to avoid setting float: left; on both block1 and block2 or making them floating by position: absolute|relative because that generates other problems in my layout. Any ideas?

EDIT

Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see jsFiddle). I am now using float: left and will have to figure out how I can add a div that consumes the free-space on the right.

Answer 1

Update this part of css :

#block1, #block2 {
    display: block;
    float: left;
    background-color: #00f;
    height: 200px;
}

When you are inline, spaces take space!

EDIT :

To be safe change this part of HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
        <div style="clear: both"></div>
    </div>