Centering text between two images on center of screen - html

Question

I'm having problems trying to take a piece of text, center it on the page, and have an image on the left and on the right of it.
Keep in mind, I'm only allowed to change CSS code for positioning. The HTML is completely right.
Here html code:
<div id="container">
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>
Our restaurant has the best barbecue that you can find at Philadelphia.
We have an amazing team just to serve you, your family, and your friends.
</p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>
And here is my CSS
#container {
width: 75%;
margin: 15px auto 15px auto;
}
* {
background-color: tan;
}
#pic_1 {
position: absolute;
display: inline-block;
float: left;
}
#pic_2 {
position: absolute;
display: inline-block;
float: right;
}
#aboutus {
position: relative;
text-align: center;
height: 275px;
width: 200px;
color: white;
display: inline-block;
left: 275px;
}
div {
border: solid 2px black;
}
The problem I am running into is that the first image is in the right spot, I'm just trying to get the 2nd image to go on the right side. For some reason, it's just not having it. The text is supposed to be centered.
Any help would be greatly appreciate it

Answer 1

I recommend you use flex instead of float, since float is really not meant for layout.
Stack snippet
#container {
width: 75%;
margin: 15px auto;
}
* {
background-color: tan;
}
#container > div:nth-child(2) {
display: flex;
}
#pic_1 {
flex: 1;
}
#pic_2 {
flex: 1;
}
#aboutus {
flex: 1 1 200px;
text-align: center;
height: 275px;
color: white;
}
div {
border: solid 2px black;
}
<div id="container">
<!-- ADD NEW CODE HERE... -->
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>Our restaurant has the best barbecue that you can find at Philadelphia. We have an amazing team just to serve you, your family, and your friends. </p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>

Answer 2

Make them display block and float left
#pic_1 {
display: block;
float: left;
width: 33%;
}
#pic_2 {
display: block;
float: left;
width: 33%;
}
#aboutus {
text-align: center;
display: block;
float: left;
width: 33%;
}