I am attempting to align multiple div elements with a width relative to the screen size.
However, when I try to float them next to each other, they shift to the right and display under each other. I have experimented with applying display: inline-block; and float: left; to the div elements, but that doesn't seem to solve the issue.
My intended layout
Current layout behavior
#navbarselector {
float: left;
width: 75%;
height: 8%;
z-index: 1;
background-color: #B4ADA5;
}
#ButtonOpt {
float: left;
width: 23%;
height: 8%;
margin-left: 2%;
z-index: 3;
background-color: #B4ADA5;
}
/* More CSS code goes here... */
<div class="container">
<div class="nav nav-tabs" id="navbarselector" role="tablist">
<a ...></a>
<a ...></a>
<a ...></a>
<a ...></a>
<a ...></a>
<a ...></a>
<a ...></a>
<a ...></a>
</div>
<div id="ButtonOpt">
<div class="dropdown">
<button ...></button>
<div id="myDropdown" class="dropdown-menu"></div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<div class="tab-pane" id="view-2"></div>
<div class="tab-pane" id="cmcVGVL"></div>
</div>
<!-- More tab content here... -->
</div>
</div>
</div>