Delete white space between divs

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.

Answer 2

Use:

float:left;
clear:none;  

In both div

Answer 3

If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...

<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>