Delete white space between divs - css

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>

Answer 4

Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding

Answer 5

This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.

Answer 6

You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.

Answer 7

best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)

Answer 8

Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/

Answer 9

Move these statements onto the same line:
</div><div id="right_side">

Answer 10

Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.

Answer 11

Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.

Answer 12

Parent div set to font-size: 0px and chiilds to wanted size like 17px :)