How to delete white space between two div element when they display as inline-block

Question

I want to use inline-block to put two div elements side by side (just like float:left), but when I open the page in the browser the second div goes to the next line, but when set the center div width to 79% or less. Then it displays in one line, but it seems that there is about 4px space between left and center div, then I set the margin of both div to 0px, result was the same.

If anyone knows about this please suggest me how to solve. Thank in advance.

Note: If I user float then there is no problem, but I need to use inline-block The code is bellow.

css:

<style type="text/css">
#container {
    width: 980px;
}
#container, #left, #center {
    display: inline-block;
}
#left {
    width: 20%;
}
#center {
    width: 80%;
}
</style>

html:

<div id="container">
    <div id="left">
        left other elements goes here
    </div>
    <div id="center">
        center other elements goes here
    </div>
</div>

Answer 1

inline-block leaves white-space between elements.

Write elements on same line to avoid white-space.

Change

<div id="left">
    left other elements goes here
</div>
<div id="center">
    center other elements goes here
</div>

to

<div id="left">
    left other elements goes here
</div><div id="center">
    center other elements goes here
</div>

Answer 2

You can try this.

<div id="container"><!--
 --><div id="left">
        left other elements goes here
    </div><!-- 
 --><div id="center">
        center other elements goes here
    </div>
</div>

That way you can keep a proper indentation

Answer 3

The simplest solution would be to remove the white spaces itself

<div id="container"><div id="left">left other elements goes here</div><div id="center">center ther elements goes here</div></div>

Answer 4

HTML:

 <div id="left">
        left other elements goes here
    </div><div id="center">
        center other elements goes here
    </div>

css:

#container {
    width: 980px;
}
#container, #left, #center {
    display: inline-block;
}
#left {
    width: 20%;
}
#center {
    width: 80%;
}

Answer 5

wow...to many solutions already,

have you tried display:table...its simple IE8+ supported and not much css required for it and you get you purpose:

demo

#container {
    width: 980px;
    display:table;
}

#left, #center {
    display:table-cell;
    border:1px solid #000;
}

Answer 6

inline-block leave white-space (default).

To solve your issue set the end tag of div id="left" directly before the start of the second div.

HERE IS A WORKING DEMO

Check it out

<div id="container">
    <div id="left">
        left other elements goes here
    </div><div id="center">
        &nbsp;center other elements goes here
    </div>
</div>

Answer 7

Use left:-3px; on your css code (;