How do you make a div wrap around floating elements? - html

Question

What I want
I am trying to create a navigation bar for a mobile site. I want a dark blue navigation div to house a menu button and a search form.
What I get
My wrapper div just appears as a thin dark blue line and the navigation divs within just exist outside of the wrapper.
The code
<div id="mobileNavBar">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
Here is CSS for the navigation div
#mobileNavBar{
background-color: #4d94ff;
border:1px solid #4d94ff;
height:auto;
}
The image
Below is an image of my mobile site, ignore the large black boxes, that's just me hiding content. There's actually a logo there and written content.
As you can see, my navigation div is a thin darker blue line and the navigation contents are underneath.
What I tried
Well after looking at similar questions on this website, I was led to believe that the issue is that my elements are floating and therefore I need to add:
<div style="clear:both"></div>
However this doesn't seem to have an impact.
How, could I get the navigation div to wrap itself around the image for the menu and the search bar? Or rather, how do I get a div to wrap around floating divs?

Answer 1

There is a CSS hack for clearing all your internal floats.
Add class "clearfix" to your div:
<div id="mobileNavBar" class="clearfix">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
CSS code:
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
So, this will clear all the floats inside an existing div.
You could have created style with your div id 'mobileNavBar' as well but it is better to create a reusable class.
Please check https://www.w3schools.com/howto/howto_css_clearfix.asp for more clarity.

Answer 2

Floats can be tricky. Can you use flexbox?
display:flex will make this simpler :)
css:
#mobileNavBar {
background-color: #4d94ff;
border: 1px solid #4d94ff;
display: flex;
}
html:
<div id="mobileNavBar">
<div style="width:20%;">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x">first div</i></span>
</div>
<div style="width:80%">
second div
</div>
</div>
* markup for outline and padding not shown

Answer 3

Apply following class to floated elements parent.
.clear:after{
content: ' ';
display: table;
clear: both
}
Or you can add extra element in HTML
<div>
<div style="float: left;">Sidebar</div>
<div style="float: right;">Content</div>
<div style="clear: both;"></div><!-- Clear the float -->
</div>
above solution solve your problem but my opinion is you can use flex to grid for this kind of layout.