Positioning error with flexbox - html

Question

so I am doing this project and i've started to run into problems with display properties and elements not positioning as i would want them to. Here's what i have so far: https://codepen.io/benasl/pen/zdMbKQ
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
}
.below {
display: flex;
clear: both;
width: 50%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
</div>
</div>
</div>
Everything was okay before i added the .below class with all its content, what i need is .left to be on the left and .rightto be in the right..
I've tried all sorts of display properties, none of them seem to work.

Answer 1

Note, your markup and CSS can be cleaned up a lot, though I choose not to do that for your.
If you move the .below element's into each .left/.right element, add flex-wrap: wrap to the .left/.right rules, and use calc() for the aside's width (so it take border/margin into account), you'll get a good start of both see how Flexbox works and to restructure your markup.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
flex-wrap: wrap;
}
.below {
display: flex;
clear: both;
width: 100%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
aside {
width: calc(40% - 18px);
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
margin-right: 15px;
}
section {
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

Add display: flex to the wrapper.
Wrap top left content in a new wrapper (in this case .left-top) to separate it from below.
Separate left and right and add flex-direction: column to stack left-top and below.
*Avoid mixing flex and float
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin: 0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: flex;
width: 100%;
}
.left {
padding-right: 10px;
border-right: 1px solid #797977;
display: flex;
}
.below {
display: flex;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size: bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background: #868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border: none;
color: #c3c3c2;
cursor: pointer;
transition: all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
.left,
.right {
flex-direction: column;
}
<div id="container">
<div class="wrapper">
<div class="left">
<div class="left-top">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>