'can't get image and text to align with CSS/flexbox under the navbar

I've been trying to align text to the right of an image but no matter what I do -- when the text line gets to be too long -- it keeps showing up right underneath the image instead of continuing onto the next line next to the image. I've tried to add a display inline for the text but it doesn't change a thing. I've also attempted to float the image to the left but it ends up cutting my image in half.

p {
    text-align: right;
    color: white;
    font-size: 20px;
    font-family: orpheuspro, serif;
    font-style: normal;
    align-items: center;
    line-height: 2.5;
    text-transform: capitalize;
    font-size: 30px;
    justify-content: right;
    float: right;
    padding-right: 100px;
    padding-bottom: 90px;
    overflow: auto;
}

img {
    padding-left: 90px;
    opacity: 0.55;
    height: auto;
   
}

div {
    position:relative;
    background-color: #361833;
    min-height: 40vh;
}

The HTML file :

<div>
<div>
  <br>
  <img src='../../assets/img/image0.jpeg' alt="wj" width="500"/>
  <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>

Any guidance would be appreciated as I'm pretty new to CSS! Thanks!

htmlcssdisplaytext-alignmenttext-align


Solution 1:[1]

try this instead using flex property instead of float.

Also add to p tag word-break:break-word; to align next line

Result desktop view:

enter image description here

Mobile view:

enter image description here 

p {
    text-align: right;
    color: white;
    font-size: 20px;
    font-family: orpheuspro, serif;
    font-style: normal;
    align-items: center;
    line-height: 2.5;
    text-transform: capitalize;
    font-size: 30px;
    justify-content: right;
    padding-right: 100px;
    padding-bottom: 90px;
    overflow: auto;
    word-break:break-word
}

img {
    padding-left: 90px;
    opacity: 0.55;
    height: auto;

}

.nav {
    position:relative;
    background-color: #361833;
    min-height: 40vh;
    display:flex;
    flex-wrap:nowrap;
}

@media only screen and (max-width:768px){
  .nav {
      display:flex;
      flex-direction:column;
  }
}
<div>
  <div class="nav">
    <img src='https://i.stack.imgur.com/amhjm.png' alt="wj" width="500"/>
    <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
  </div>
</div>

Solution 2:[2]

Ended up solving this problem by setting a width to my text!

Solution 3:[3]

I know this question has been up for a while, but I've simplified this so the image doesn't get squished. Not sure why that was a viable solution anyway.

header {
  background-color: #361833;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1100px;
  margin: 0 auto;
}
.nav img {
  height: auto;
  max-width: 100%;
  opacity: 0.5;
}
.nav p {
  color: white;
  text-transform: capitalize;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
}
<header>
  <div class="nav">
    <img src='https://i.stack.imgur.com/amhjm.png' alt="wj"/>
    <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
  </div>
</header>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rayees AC
Solution 2 st123
Solution 3 Millhorn

Related Questions