Positioning error with flexbox

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.

I think @PierreLeBot says that float has no effect on _flex items_ (the children of the flex container), see [this answer](https://stackoverflow.com/a/36182782/137626) for example. It still has an effect on the flex container itself — FelipeAls, Aug 30 '17 at 14:17

score 1 · Accepted Answer · answered Aug 30 '17 at 10:47

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>

Thank you so much. I will definetely fix up the structure and css of the project, but for now i just need it as a sketch or something like that. — Benas Lengvinas, Aug 30 '17 at 11:04
@BenasLengvinas You're welcome...and this article is very useful when to start learn Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Asons, Aug 30 '17 at 11:08

score 0 · Answer 2 · answered Aug 30 '17 at 10:55

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>

Positioning error with flexbox

2 Answers2