Arranging Flexbox items - Image next to text in Flexbox CSS

Mark McNulty 0
Viewed 32

I'm trying to have 2 paragraphs, one below the other with different styling, and an image next to them and aligned with them in flexbox.

I cannot seem to get it to align next to the items. Currently, I have the image flex-end aligned to the right and the text on the left, but I need them to be together.

I have tried moving them in and out of being the same div but I'm just getting nowhere. I'm not sure what I need to do to get the placeholder image next to the hero-container text.

CSS:

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: black;
  }

div.Hero-container {
    display: flex;
    flex-direction: column;
    width: 80%;
  }

  p{
    display: flex;
   }

   p.intro-text{
    order: 1;
    color: #F9FAF8;
    font-weight: bold;
    font-size: 48px;
    align-self: left;
    width: 80%;
   }

   p.secondary-text{
    order: 3;
    color:#e5e7eb;
    font-size: 18px;
   }

   img {
    margin-right: 10px;
    width: 350px;
    height: 150px;    
   }

  .image-container {
    display: flex;
    flex-direction: row;
    justify-content: right;
    height: 72px;
    padding: 10px 0;
 }

HTML:

    <div class="header">
    <header class="Hero">Header Logo</header> 
    <ol>
        <li><a href="www.reddit.com">Link One</a></li>
        <li><a href="www.reddit.com">Link Two</a></li>
        <li><a href="www.reddit.com">Link Three</a></li>
    </ol>
    </div>
    <div class="Hero-container">
        <p class="intro-text">
            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
        </p>
        <p class="secondary-text">Blah blah Blah</p>
    </div>
    <div class="image-container">
        <img src="https://via.placeholder.com/350x150" alt="Placeholder Image">
    </div>
</body>
</html>```
flexbox css html
1 Answers

You need another container to wrap around the text to make it easier on yourself. The new .hero-text-container element has a flex width calculated to 100% - 350px because your image is 350px so the calc can take care of the text container size. I also recommend cleaning up some unnecessary flex displays on the children, like the .image-container that only has one child element. Add align-items: center; to .hero-text-container if you want the image to be vertically aligned middle

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: black;
}

.hero-container {
  display: flex;
  width: 100%;
}

.hero-text-container {
  flex: 0 0 calc(100% - 350px);
  max-width: calc(100% - 350px);
}

p {
  margin: 0;
}

p.intro-text {
  color: #F9FAF8;
  font-weight: bold;
  font-size: 48px;
}

p.secondary-text {
  color: #e5e7eb;
  font-size: 18px;
}

.image-container {
  height: 72px;
  padding: 10px 0;
}

img {
  width: 350px;
  height: 150px;
}
<html>

<body>
  <div class="header">
    <header class="Hero">Header Logo</header>
    <ol>
      <li><a href="www.reddit.com">Link One</a></li>
      <li><a href="www.reddit.com">Link Two</a></li>
      <li><a href="www.reddit.com">Link Three</a></li>
    </ol>
  </div>
  <div class="hero-container">
    <div class="hero-text-container">
      <p class="intro-text">
        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
      </p>
      <p class="secondary-text">Blah blah Blah</p>
    </div>
    <div class="image-container">
      <img src="https://via.placeholder.com/350x150" alt="Placeholder Image">
    </div>
  </div>
</body>

</html>

wouch0
Related