I ve created a HTML template with a header, menu and content section:
<html>
<head>
<style>
#header {
background-color: red;
width: 100%;
height: 85px;
}
#below-header {
background-color: yellow;
position: relative;
height: 200px;
}
#menu {
background-color: blue;
position: absolute;
width: 200px;
height: 150px;
}
#content {
padding-left: 200px; /* menu */
background-color: green;
height: 150px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="below-header">
<div id="menu">menu</div>
<div id="content">content</div>
below-header
</div>
</body>
</html>But when inserting a block-element with an margin (e.g. a h1 tag), there is a ugly gap:
<html>
<head>
<style>
#header {
background-color: red;
width: 100%;
height: 85px;
}
#below-header {
background-color: yellow;
position: relative;
height: 200px;
}
#menu {
background-color: blue;
position: absolute;
width: 200px;
height: 150px;
}
#content {
padding-left: 200px; /* menu */
background-color: green;
height: 150px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="below-header">
<div id="menu">menu</div>
<div id="content">
<h1>headline in content</h1>
</div>
below-header
</div>
</body>
</html>When removing the margin or converting the h1 element to an inline-block element, the gap is gone.
