Struggling to create a layout for a website, here is the CSS and HTML I am using.
Issue:
1. The header and navigation divs seem to be merging even without using margin 2. The merge is not happening between the navigation and left-nav/content divs
Can anyone clarify what's going on?
HTML
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="left-nav">
</div>
<div id="content">
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#header {
height: 15%;
width: 100%;
background-color:grey;
margin:1%;
}
#navigation {
height: 5%;
width: 100%;
background-color:grey;
margin:1%;
}
#left-nav {
height: 40%;
width: 20%;
background-color:grey;
margin:1%;
float:left;
}
#content {
height: 40%;
width: 70%;
background-color:grey;
margin:1%;
float:left;
}