When trying to create a two-column layout with a left floating navigation div and an absolute positioned header, I encountered an issue where the navigation div had an extra margin of 4em. This seemed unnecessary to me as it disrupted the expected layout flow. I have included my code below for reference:
* {
box-sizing: border-box;
}
body { /* disable default browser settings */
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 1px;
left: 0px;
height: 3em;
width: 100%;
padding: 10px;
border: 1px solid blue;
border-radius: 0.5em;
background-color: silver;
}
nav {
float: left;
width: 17em;
border: 1px dashed red;
margin-top: 4em;
padding: 5px;
}
article {
margin: 4em 1em 0em 18em;
padding: 0px 10px;
border: 1px dashed red;
min-width: 15em;
}
After further investigation, I realized that by removing the absolute positioning of the header, the layout appeared as expected: header - margin - navigation and article on one line. My question here is: why does the absolute positioning of the header cause this extra margin in the navigation div?