CODEWITHSUNDEEP
csshtml
Taras Lukavyi
Taras Lukavyi

Reputation: 1369

Delete white space between divs

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

Upvotes: 27

Views: 93922

Answers (12)

Gavo
Gavo

Reputation: 25

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

Upvotes: 0

gdarcan
gdarcan

Reputation: 603

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)

Upvotes: 2

dodov
dodov

Reputation: 5844

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

Upvotes: 5

Rajesh Kannojiya
Rajesh Kannojiya

Reputation: 37

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.

Upvotes: 0

Thomas Clayson
Thomas Clayson

Reputation: 29925

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.

Upvotes: 28

fuzzysearch
fuzzysearch

Reputation: 916

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>

Upvotes: 13

user3170223
user3170223

Reputation: 59

Only add this to your CSS 

h1 {
    padding:0;
    margin:0;
   }

Space between div is only due to h1 Margin and Padding

Upvotes: 5

user2613041
user2613041

Reputation: 43

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.

Upvotes: 0

check123
check123

Reputation: 2009

Use: 

float:left;
clear:none;

In both div

Upvotes: 25

Purag
Purag

Reputation: 17061

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.

Upvotes: 5

Derek Tomes
Derek Tomes

Reputation: 4007

Move these statements onto the same line:

</div><div id="right_side">

Upvotes: 1

AlexKempton
AlexKempton

Reputation: 1698

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/

Upvotes: 1

Related Questions