I'm having trouble with positioning div1 above div2 in the code snippet below. Despite setting both divs to have full width and float right, they appear next to each other instead of stacked vertically. I've tried using clear:both as well, but it didn't work as expected.
Any suggestions on how to achieve this layout?
Thank you
EDIT: I am utilizing Bootstrap 4.0.0.
<body>
<header>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light top">
<img src="images.png" alt="image" class="imageClass">
<div class="div1 ">
<a href="#" id="id1">somthinghere</a>
<a href="#" class="active">link</a>
<a href="#" class="">link2</a>
</div>
<div class="collapse navbar-collapse div2" id="navbarsExampleDefault">
<ul class="navbar-nav ml-lg">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link11</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link111</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link1111</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
CSS:
header{
position:absolute;
z-index: 10;
width: 100%;
}
.div2{
clear:both;
width: 100%;
float:right;
}
.div1{
width: 100%;
float:right;
}