How to get 'four corner' alignment with floated divs - html

Question

Ok so my project requires my divs to be floated because I would like to place text neatly to the side of them. I can get my divs to float left and right as needed, but as you see from the snippet(even though it's not what you'd get from a browser since the dimensions are off), the two divs at the bottom I need to be near the top in order to make a perfect scquare with the two left-floated divs. Below is what I'm looking for:
.clear {
clear: both;
}
#centerbar {
width: 100%;
height: calc(100vh - 150px);
background-color: black;
float: left;
}
#centerbar h1 {
text-align: center;
color: white;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
color: white;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content {
display: flex;
margin: 0 auto;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
.box {
height: 200px;
}
.fltlt {
float: left;
margin-right: 50px;
}
.fltrt {
float: right;
margin-right: 50px;
}
<div class="container">
<div id="nav">
<ul>
<li>Home
</li>
<li>Works
</li>
<li>About
</li>
</ul>
</div>
<div class="clear"></div>
<div id="centerbar">
<h1>Sample Layout</h1>
<div class="box">
<img src="gold.jpg" alt="The Color Gold" class="fltlt">
<p>This is some sample text</p>
</div>
<div class="clear"></div>
<div class="box">
<img src="grey.jpg" alt="The Color Grey" class="fltlt">
<p>This is some sample text</p>
</div>
<div class="box">
<img src="orange.jpg" alt="The Color Orange" class="fltrt">
<p>This is some sample text</p>
</div>
<div class="box">
<img src="red.png" alt="The Color Red" class="fltrt">
<p>This is some sample text</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum</div>
</div>
</div>

Answer 1

I recommend to not use float for layout, and since you started out with flex, use it all the way.
Bonus: A clean, simple and readable structure of both CSS and markup.
.container .row {
display: flex;
flex-wrap: wrap;
}
.row .box {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.box img {
width: 100px;
margin-right: 10px;
}
<div class="container">
<div class="row">
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
</div>
</div>

Answer 2

Here is what you are looking for(I made it from the start):
.box {
float: left;
position: relative;
width: 50%;
margin-bottom: 10px;
}
.container .flex {
display: flex;
align-items: center;
}
.container p {
margin-left: 5px;
}
<div class="container">
<div class="row">
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
</div>
</div>