Width auto results in larger width than the sum of children's width

Question

I am currently trying to construct a basic CSS-layout for myself, where I want to deploy an expandable menu that pushes the rest of the content out of the screen (or the container). To do so, I used the white-space:nowrap. I am then planning to manipulate the width of the menu-div, which works fine for me. However, some sort of padding or margin appears to be applied between the child-divs in the container and I can't find a way to get rid of them. Could you help me out here? i would also like to understand what causes this issue. Many thanks in advance!

CSS:

html{
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}
body{
    margin:0;
    padding:0;
}
#container{
    width:1024px;
    height:768px;
    background-color:#000;
    overflow:hidden;
    white-space:nowrap;
}
#icons{
    width:30px;
    height:100%;
    display: inline-block;
    background-color:#9e971f;
}
#menu{
    width:100px;
    height:100%;
    display: inline-block;
    background-color:#1f939e;
}
#top{
    height:40px;
    width:100%;
    display: inline-block;
    vertical-align: top;
    background-color:#1f3f9e;
}

HTML:

<div id="container">
    <div id="icons"></div>
    <div id="menu"></div>
    <div id="top"></div>
</div>

FIDDLE

providing a fiddle will help to determine the problem faster... — brobken, Jan 20 '15 at 14:11

score 1 · Answer 1 · answered Jan 20 '15 at 14:07

1

A simple way to get around this is to remove the whitespace that is caused by newlines between each div:

<div id="container">
    <div id="icons"></div><div id="menu"></div><div id="top"></div>
</div>

answered Jan 20 '15 at 14:07

Alan

2,962
2
15
18

score 0 · Accepted Answer · answered Jan 20 '15 at 14:11

0

Using float: left;should work:

http://jsfiddle.net/hjLdrjzx/

answered Jan 20 '15 at 14:11

TijmenBrx

52
2
12

Width auto results in larger width than the sum of children's width

2 Answers2