How can I stack two divs next to one - html

Question

This is what I am trying to go for, where each green line is a parent div.
This is what I have tried so far:
<div id="gym" class="main_container">
<div id="gym_activity_title_hours_pic" class="activity_title_hours_pic">
<!-- <div id="gym_title_hours" class="activity_title_hours"> -->
<div id="gym_title" class="activity_title">
The Gym
</div>
<div id="gym_hours" class="activity_hours">
5 Hours
</div>
<!-- </div> -->
<div id="gym_pic" class="activity_pic">
<img src="./images/gym.jpg" class="pic"/>
</div>
</div>
</div>
This is the CSS
.main_container {
width: 40%;
height: 40%;
display: inline;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.activity_title_hours_pic {
display: inline;
}
.activity_title_hours {
float: left;
width: 50%;
}
.activity_title {
/* float: left; */
float: left;
width: 50%;
}
.activity_hours {
/* float: left; */
float: left;
width: 50%;
}
.activity_pic {
float:right;
width: 50%;
}
.pic {
box-sizing: border-box;
margin-top: 1%;
height: 10%;
width: 10%;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
background-repeat:no-repeat;
background-size:cover;
}
However this is the outcome that I am currently getting:
As you can see, the image is under the activity hours, which is not desired.
Thanks for any help!

Answer 1

You're most likely getting bogged down in all the CSS you've written here. You can accomplish what you're asking in very little code. As a starting tip, get rid of your floats - they're all but useless in modern CSS. Use flexbox instead: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It may be a little tricky understanding at first but it is compatible pretty much everywhere and solves so many CSS pitfalls of the past.
Without going into too much of your CSS, you probably first need to scoot up your 2nd-to-last closing </div> so that it only wraps around #gym_title and #gym_hours - right now your HTML code doesn't describe what you drew in your diagram.
I wrote a little codepen here: https://codepen.io/dustinkeeton/pen/NEgbLe
P.S. codepen.io is a nice way of working on little bits of HTML/CSS/JS code and sharing it.

Answer 2

Just remove float: left from activity_hours class and uncomment that gym_title_hours div.
HTML:
<div id="gym" class="main_container">
<div id="gym_activity_title_hours_pic" class="activity_title_hours_pic">
<div id="gym_title_hours" class="activity_title_hours">
<div id="gym_title" class="activity_title">
The Gym
</div>
<div id="gym_hours" class="activity_hours">
5 Hours
</div>
</div>
<div id="gym_pic" class="activity_pic">
<img src="./images/gym.jpg" class="pic"/>
</div>
</div>
</div>
CSS:
.main_container {
width: 40%;
height: 40%;
display: inline;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.activity_title_hours_pic {
display: inline;
}
.activity_title_hours {
float: left;
width: 50%;
}
.activity_title {
/* float: left; */
float: left;
width: 50%;
}
.activity_hours {
width: 50%;
}
.activity_pic {
float:right;
width: 50%;
}
.pic {
box-sizing: border-box;
margin-top: 1%;
height: 10%;
width: 10%;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
background-repeat:no-repeat;
background-size:cover;
}

Answer 3

If I was you I would start with using Grid Systems. Watch a couple fo youtube videos. CSS gets Messy without a grid or flexbox. I would then move onto flexbox once you got a handle on grids.
Vojtone is right about the float take that out but its still messy.
HTML
<div id="gym" class="grid-container">
<div id="gym_title" class="grid-item box1">The Gym</div>
<div id="gym_hours" class="grid-item box2">5 Hours</div>
<div class="grid-item box3">
<img src="https://www.thegymgroup.com/assets/img/components/c050.03-movember rich-text-block/the-gym-group-logo-movember.png" id="gym_pic" class="pic" height=100 width=150>
</div>
</div>
CSS
grids are made up with 12 columns just mess around with the span of the columns and row and you'll get the hang of it.
.grid-container {
display: grid;
border:solid 2px;
}
.box1{
grid-column: 1 / span 11;
border:solid 2px
}
.box2{
grid-column: 1 / span 11;
border:solid 2px
}
.box3{
grid-column: 12 / span 1;
grid-row: 1 / span 2;
}
Codepen
CODE PEN EXAMPLE HERE