CODEWITHSUNDEEP
htmlcssflexbox
Mark McNulty
Mark McNulty

Reputation: 1

Arranging Flexbox items - Image next to text in Flexbox CSS

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.

*,
::before,
::after {
  box-sizing: border-box;
}

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;
}
<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>

Upvotes: 0

Views: 1415

Answers (1)

wouch
wouch

Reputation: 1241

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>

Upvotes: 1

Related Questions