I am trying to make a child div (div inside another) stay inside of the parent and not come out of it. I would like for the options div to stay inside of the header div at all times.
<!DOCTYPE html>
<html>
<head>
<title>Noah</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #0B0F25;
font-family:'Times New Roman', Times, serif;
color: white;
margin: 0;
padding: 0;
}
#header {
background-color: #0B0F25;
width: 100vw;
border-bottom: .5px solid black;
border-top: 1.5px solid black;
height: 5vw;
background-color: purple;
}
#cmdLine {
padding: 10px;
}
#cmdTitle {
text-align: center;
font-size: 16px;
}
#options {
position: absolute;
width: 10vw;
background-color: pink;
}
#help {
padding: 5px;
display: inline-block;
}
#action {
padding: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div id = "header">
<h3 id = "cmdTitle"> Noah@Noah: ~</h3>
<div id = "options">
<h2 id = "action">Actions</h2>
<h2 id = "help">Help</h2>
</div>
</div>
<p id = "cmdLine">$</p>
</body>
</html>
This displays this:
.
each div has an ID. I have tried setting position: absolute on the header div then once again on the options div but no luck.