Kevin Aartsen Kevin Aartsen - 6 months ago 25
CSS Question

Divs not positioning correctly

I have a div called menu, and I have a another div called content these 2 divs are inside a div called container to keep them in place.
I tried adding a div called text-box inside the content div, but somehow this div gets placed in the menu div!
I want the textbox div placed in the content div, not the in the menu.

The Code (https://jsfiddle.net/9xh3xdon/1/):



/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
position: absolute;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}

/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
position: absolute;
max-height: 100px;
margin-top: 100vh;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
}
#menu ul {
float: right;
height±: 100%;
width: auto;
line-height: 100px;
}
#menu ul li {
padding-right: 20px;
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 40px;
width: 200px;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 20px;
}

/*content*/
#content {
width:100%;
height:auto;
min-height:500px;
position: relative;
}
.text-box {
width:200px;
height:auto;
background-color:blue;
min-height:100px;
}

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
<div id="menu">
<div id="logo">
<p>Hier komt een logo</p>
</div>
<ul>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>Producten</li>
</ul>
</div>
</div>
<div id="content">
<div class="text-box"></div>
</div>
</div>
</body>
</html>




Answer

In the example you've provided, .text-box is rendered in the element #content - it appears to be placed inside of #menu because this element has been positioned absolute, taking it out of the natural flow of the document.
Declaring a margin-top value to the #content div, equal to, or greater than the height of #menu will rectify this

CSS

#content {
    width: 100%;
    height: auto;
    min-height: 500px;
    position: relative;
    margin-top: 100px;
}