Question

I’m getting some strange whitespace between two divs I have.

Each div has the css property display: inline-block and each have a set height and width.

I cannot find where the whitespace is.

Here is a Fiddle

Answer 1

You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.

You have:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

Change for:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

However, this is a bad way to do what you want to do.

You should float the elements if thats what you want to do.