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>
Using float: left;should work:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments