HTML Text Wrapping

June 12, 2023

I am working on an image/text box for my website, and I want the image to stay to the left of the text, which I got working with only 1 or 2 lines of text beside it:
It stays beside the image
However the second I add more text the whole text jumps to the bottom.
It all jumps to the bottom

Here is the CSS/HTML code for it:

HTML:

<div class="textBox">
  <img src="bg.jpg" class="textBoxImg">
  
  <div class="textBoxContent">
    <p class="textBoxTitle">Chicago</p>
    <p class="textBoxText">Here is more information about chicago!</p>
  </div>

</div>

CSS:

.textBox {
  background: white;
  padding: 8px;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 10px;
}

.textBoxContent {
  display: inline-block;
  vertical-align: top;
}

.textBoxTitle {
  font-size: 30px;
  line-height: 0px;
}

.textBoxText {
  font-size: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.textBoxImg {
  border-radius: 10px;
  max-width: 40%;
  height: auto;
}

I am wondering how I can fix that so the line break will keep the text to the side of the image, not below it.

I understand that this may not be the most efficient way to do these things, and I apologize too if this is a very easy question, I am still just learning and got very stumped by this one.

>Solution :

Add this to your class called textBox :

.textBox {
    display: flex;
    flex-direction: row;
    background: white;
    padding: 8px;
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 10px;
  }

This will fix it. As you can see, I added the flex property (display: flex;) and I gave it a direction (flex-direction: row;). I would recommend you to learn more about ‘Flex’ and ‘Grid’ properties to be able to organize better every container as you want it to be. I hope this helped 🙂