Question 184017 in Html Question posted in
Some basic documentation can be found here.

HTML Text Wrapping

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.

Tags:

2

Answers


  1. 0

    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 🙂

    Login or Signup to reply.
  2. 0

    Simplified your css …make sure bg.jpg and your html are in same folder.

    .textBox {
  padding: 8px;
}

.textBoxContent {
  display: inline-block;
  height: 10px;
  width: 500px;
  vertical-align: top;
}

.textBoxImg {
  max-width: 40%;
}
    <div class="textBox">
  <img src="bg.jpg" class="textBoxImg">
  <div class="textBoxContent">
    <a>Chicago</a>
    <p>Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!Here is more information about chicago!</p>
  </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search