CODEWITHSUNDEEP
htmlcssflexbox
Bob Storms
Bob Storms

Reputation: 71

I don't want my divs to overlap inside a flexbox

I'm currently developing my first website. I've come to a point where I have two divs placed next to each other inside of a flexbox. Both divs have a width and height size in percentages. When I shrink the website, however, the right div overlaps the left div. If they're going to overlap I want them to be placed underneath each other. (It's about the right-side-content div overlapping the left-side-content div)

I've included my HTML and CSS code.

HTML:

<div class="content">
               <div class="left-side-content">
                    <div class="intro">
                        <div class="brands">
                            <a href="#"><img src="images/logo%20ster.png" id="logo-ster"/></a>
                        </div>

                        <p class="top-title">Banner and endcard</p>
                        <h1>STER</h1>
                        <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
                        <button class="view-project-button">View Project</button>
                    </div>
                </div>

                <div class="right-side-content">
                    <img src="images/sponsorloop-collage.png"/>
                </div>

</div>

CSS:

.content {
    display: flex;
    align-items: center;
    height: 80%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content .left-side-content {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
}

.content .right-side-content {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Upvotes: 7

Views: 16126

Answers (1)

sol
sol

Reputation: 22919

Add the flex-wrap property to .content.

Also, instead of using width for left and right content, use flex-basis instead, or incorporate it into the shorthand flex, as in the snippet below...

.content {
  display: flex;
  align-items: center;
  height: 80%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.content .left-side-content {
  flex: 1 0 30%;
  height: 100%;
  display: flex;
  align-items: center;
}

.content .right-side-content {
  flex: 1 0 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
<div class="content">
  <div class="left-side-content">
    <div class="intro">
      <div class="brands">
        <a href="#"><img src="images/logo%20ster.png" id="logo-ster" /></a>
      </div>

      <p class="top-title">Banner and endcard</p>
      <h1>STER</h1>
      <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
      <button class="view-project-button">View Project</button>
    </div>
  </div>

  <div class="right-side-content">
    <img src="https://placehold.it/300x300" />
  </div>

</div>

Upvotes: 6

Related Questions