How can I position a div box right under another div box? - html

Question

I have a problem with the positioning (?) of my div boxes. I have a div box for my navigation bar.
I want a div box right under the navigation bar in the center, which can be filled with some text.
I tried:
.navigation {
background-color: black;
position: fixed;
width: 1920px;
left: 0px;
top: 0px;
}
.inhalt {
position: realative;
margin: 0px auto;
width: 600px;
top: 600px;
background-color: white;
}
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
Thanks for any answer!!

Answer 1

1- first, .inhalt class position must be "relative" not "position:realative;" as you have written above so the "top" property could work.
2- give height to your second box so you can see it.
3- When elements are positioned, they can overlap other elements. you can solve this by either give your navigation bar "sticky" position or if you want to use fixed position, use "top" property to solve the problem. I add a snippet for this solution.
4- you can use first give your navigation bar relative position and then on scrolling give it a fixed position. see the example on codepen.
.navigation{
background-color: black;
position: fixed;
width: 100%;
left: 0px;
top: 0px;
z-index: 99999;
}
.inhalt{
position:relative;
width: 600px;
height: 500px;
top: 30px;
margin: 0px auto;
background-color: lightblue;
}
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</table>
</div>
<div class="inhalt"></div>

Answer 2

Your question is vague, but this should give you some idea to work with:
.navigation {
background-color: black;
float: left;
position: fixed;
width: 1920px;
left: 0px;
top: 0px;
float: left
}
.inhalt {
float: left;
text-align: center;
top: 15%;
left: 10%;
margin: 0px auto;
width: 100%;
background-color: white;
font-size: 20px;
}
<div id="wrapper">
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
<div class="inhalt">
<p> Some random Text </p>
</div>
</div>
Also you should prefer using lists <li> for your navigation, since tables can be a nightmare to work with in that particular usecase.

Answer 3

Ok so in addition to what explained Phanti, your HTML has an issue as there are two times the closing tab
That would be my CSS I removed some of the instructions that were not making sense to me like the fix width:
.navigation {
background-color: black;
float: left;
position: fixed;
width: 100%;
height:40px;
left: 0px;
top: 0px;
float: left
}
.inhalt {
float: left;
text-align: center;
margin-top: 60px;
margin: 0px auto;
width: 100%;
background-color: white;
font-size: 20px;
}
That would be my HTML :
<div id="wrapper">
<div class="navigation">
<table>
<tr>
<th><img src="logo.jpeg"></th>
<th></th>
<th></th>
<th>Startseite</th>
<th>Beats</th>
<th>Preise</th>
<th>Kontakt</th>
</tr>
</table>
</div>
<div class="inhalt">
<p> Some random Text </p>
</div>
</div>
Overall, since you seem to be starting on html and CSS, I would storngly advise you to start with a CSS Framwork like bootstrap, you will be able to easily build from scratch responsive website by relying on predefined classes and module (especially for menu where moving from desktop to tablet to mobile is very painful).
If you were to use Bootstrap 4 here would be a code working on all support :
Insert this between your :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Then add this in your code for the navigation and your content
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Some content</p>
</div>
</div>
</div>

Answer 4

<!-- HTML -->
div class="inhalt">
<p> some text </p>
</div>
/*-- CSS-- */
.inhalt{
margin: 10px auto 0;
width: 50%;
}
This is the perfect way of centring the div element.