HTML CSS - Text randomly dropping below image

topplr
June 14, 2023
174 views
2 votes
4 Answers

Front-end development isn’t my forte. I’ve re-created an issue in JSfiddle (https://jsfiddle.net/3uztg7ao/2/) as you see, for some strange reason, the text just randomly drops below the image.

I’ve noticed that it is when the text is in a long string without spaces. I’ve tried everything in my knowledge (not much) to fix it, but no avail.

I am wanting the text to remain on a singular line until the line break

I believe the issue is in the following css code block:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: arial;
  background: #FFFFFF;
}

.threadReply {
  border: 1px solid #d9edff;
  background-color: #dff0ff;
  font-family: arial;
  font-size: 14px;
  max-width: 95%;
  width: max-content;
  color: #333333;
  overflow: hidden;
  padding: 5px 5px 5px 5px;
  margin: 25px;
}

.threadReply:target {
  border: 1px solid #ffe9d3;
  background-color: #ffefdf;
}

.threadReply #replyInfo {
  border: none;
  font-family: arial;
  font-size: 13px;
  color: #333333;
  padding: 5px 10px 0px 5px;
}

.threadReply #replyCount {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 5px 10px 5px 5px;
}

.threadReply #replyInfo a {
  border: none;
  color: #0000EE;
  text-decoration: none;
}

.threadReply #replyInfo a:hover {
  border: none;
  color: #0000EE;
  text-decoration: underline;
}

.threadReply #replyInfo .replyLink {
  border: none;
  color: #0000EE;
  font-size: 12px;
  text-decoration: none;
}

.threadReply #replyVote {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 0px 10px 10px 5px;
}

.threadReply #replyVote a {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: none;
}

.threadReply #replyVote a:hover {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: underline;
}

.threadReply .replyImage-resize {
  border: 1px solid #DDDDDD;
  float: left;
  overflow: hidden;
  max-width: 125px;
  cursor: pointer;
  margin: 0px 15px 10px 10px;
}

.threadReply #replyMessage {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  padding: 0px 10px 10px 20px;
}

.threadReply #replyMessage a {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
}

.threadReply #replyMessage a:hover {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: underline;
}

<div class='threadReply'>
  <div id='replyInfo'>
    <p>Anonymous 06/08/2023 10:10:47 No.76 <a href='#nav' onclick='reply(this)'>[Reply]</a></p>
  </div>
  <div id='replyVote'>
    <p>[thread creator][Authentic]</p>
  </div>
  <div id='replyContent'>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKByNgCmuW5bGdNNG0kCxIItgmAsPzu0w_vQ&usqp=CAU' class='replyImage-resize'>
    <div id='replyMessage'>
      <p>>be mod/janny/retard/whatever<br> >get challenged<br> >ban
        <br> >still not providing proof<br>
        <br> many such cases</p>
    </div>
  </div>
  <div id='replyCount'>
    <p><a href='javascript:void(0);' class='reportReply'>[Report]</a></p>
  </div>
</div>

Thank you in advance.

Tags: css html

Answers

- offscriptdev
- June 9, 2023 at 11:28 pm
- 0 votes
0
The issue you’re seeing where the text is splitting between being beside the image to then being underneath is due to the use of float: left on the image and width: max-content on the container. Please see the MDN on float for details about how float works.

When that float is combined with width: max-content, it means your container will take the size of the largest content, which in this case is the text. Then, when the browser tries to wrap the text around the image because of the float, it does not have the space to handle a long string due to the constraint imposed by max-content.

To fix this, there are a few options to consider:
- Use a different width on the container
- Use word-break: break-all or word-break: break-word on the text
- Use flex/grid to define the internal layout of the container in place of float
Of course, each option has its own pros/cons, so it’s up to you to decide what will work best for your use case.

Cheers.
Login or Signup to reply.

Different ways to go about this but one solution is to define row/column layout using grid or flexbox for your img and #replyMessage content. Using flexbox below.

Small tweak to your html by wrapping your image with a <div> and adding the below styles.

#replyContent {
    display: flex;

    /* this will allow your img/content to sit in the same row.
      Note: due to max-content width, longer text will extend the width of your container. 
    */
    flex-direction: row; 
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    font-family: arial;
    background: #ffffff;
}

.threadReply {
    border: 1px solid #d9edff;
    background-color: #dff0ff;
    font-family: arial;
    font-size: 14px;
    max-width: 95%;
    width: max-content;
    color: #333333;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
    margin: 25px;
}

.threadReply:target {
    border: 1px solid #ffe9d3;
    background-color: #ffefdf;
}

.threadReply #replyInfo {
    border: none;
    font-family: arial;
    font-size: 13px;
    color: #333333;
    padding: 5px 10px 0px 5px;
}

.threadReply #replyCount {
    border: none;
    font-family: arial;
    font-size: 12px;
    color: #333333;
    padding: 5px 10px 5px 5px;
}

.threadReply #replyInfo a {
    border: none;
    color: #0000ee;
    text-decoration: none;
}

.threadReply #replyInfo a:hover {
    border: none;
    color: #0000ee;
    text-decoration: underline;
}

.threadReply #replyInfo .replyLink {
    border: none;
    color: #0000ee;
    font-size: 12px;
    text-decoration: none;
}

.threadReply #replyVote {
    border: none;
    font-family: arial;
    font-size: 12px;
    color: #333333;
    padding: 0px 10px 10px 5px;
}

.threadReply #replyVote a {
    border: none;
    font-family: arial;
    font-size: 12px;
    color: #0000ee;
    outline: none;
    text-decoration: none;
}

.threadReply #replyVote a:hover {
    border: none;
    font-family: arial;
    font-size: 12px;
    color: #0000ee;
    outline: none;
    text-decoration: underline;
}

.threadReply .replyImage-resize {
    border: 1px solid #dddddd;
    float: left;
    overflow: hidden;
    max-width: 125px;
    cursor: pointer;
    margin: 0px 15px 10px 10px;
}

.threadReply #replyMessage {
    border: none;
    font-family: arial;
    font-size: 14px;
    color: #333333;
    padding: 0px 10px 10px 0;
    word-wrap: no-break;
}

.threadReply #replyMessage a {
    border: none;
    font-family: arial;
    font-size: 14px;
    color: #333333;
    text-decoration: none;
}

.threadReply #replyMessage a:hover {
    border: none;
    font-family: arial;
    font-size: 14px;
    color: #333333;
    text-decoration: underline;
}

#replyContent {
    display: flex;
    flex-direction: row;
}

<div class='threadReply'>
    <div id='replyInfo'>
        <p>Anonymous 06/08/2023 10:10:47 No.76 <a href='#nav' onclick='reply(this)'>[Reply]</a></p>
    </div>
    <div id='replyVote'>
        <p>[thread creator][Authentic]</p>
    </div>

    <div id='replyContent'>
        <div>
            <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKByNgCmuW5bGdNNG0kCxIItgmAsPzu0w_vQ&usqp=CAU' class='replyImage-resize'>
        </div>

        <div id='replyMessage'>
            <p>>be mod/janny/retard/whatever<br>
                >get challenged<br>
                >ban<br>
                >still not providing proof<br>
                <br>
                >many such cases
            </p>
        </div>
    </div>
    
    <div id='replyCount'>
        <p><a href='javascript:void(0);' class='reportReply'>[Report]</a></p>
    </div>
</div>

Took a stab at this – removed a lot of CSS, some you may need for the :target but did not apply to the question.

Put some borders on to show what was where – just remove those CSS lines.

You can decide how you want that image sized and if you want the text-align:left instead of center etc.

body {
  font-size: 16px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: arial, sans-serif;
  background-color: #FFFFFF;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.thread-wrapper {
  display: grid;
  place-items: center;
  /* just to show where it is */
  border: solid 1px lime;
}

.thread-reply-container {
  border: 1px solid #d9edff;
  background-color: #dff0ff;
  font-size: 0.875em;
  color: #333333;
  padding: 0.3125em;
  margin: 1.5625em;
  display: grid;
  /*  grid-template-columns: 1fr;*/
  grid-auto-rows: min-content;
  grid-auto-rows: minmax(2em, auto);
}

.thread-reply-container>* {
  border: solid 1px red;
}

.thread-reply-container .reply-info-container {
  font-size: 0.8125em;
  padding: 5px 10px 0px 5px;
  color: #333333;
}

.thread-reply-container .reply-content-container {
  text-align: center;
}

.reply-content-container .reply-message-container {
  text-align: left;
  width: 18em;
  border: solid cyan 1px;
}

.reply-message-container,
.thread-text {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.reply-message>* {
  padding-left: 0.5em;
  text-overflow: wrap;
}

.reply-info-container a:hover {
  color: #0000EE;
  text-decoration: underline;
}

.reply-count-container {
  color: #333333;
}

<div class="thread-wrapper">
  <div class='thread-reply-container'>
    <div class="reply-info-container">
      <div class="thread-text">Anonymous 06/08/2023 10:10:47 No.76 <a href='#nav' onclick='reply(this)'>[Reply]</a></div>
    </div>
    <div class="reply-vote-container">
      <div class="thread-text">[thread creator][Authentic]</div>
    </div>
    <div class="reply-content-container">
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKByNgCmuW5bGdNNG0kCxIItgmAsPzu0w_vQ&usqp=CAU' class='replyImage-resize'>
      <div class="reply-message-container">
        <div class="reply-message">
          <div>>be mod/janny/retard/whatever</div>
          <div>>get challenged</div>
          <div>>ban</div>
          <div>>still not providing proof many such cases</div>
        </div>
      </div>
    </div>
    <div class="reply-count-container">
      <div class="thread-text"><a href='javascript:void(0);' class='reportReply'>[Report]</a></div>
    </div>
  </div>
</div>

Just add float:left to your #replyMessage and you should be right as rain

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: arial;
  background: #FFFFFF;
}

.threadReply {
  border: 1px solid #d9edff;
  background-color: #dff0ff;
  font-family: arial;
  font-size: 14px;
  max-width: 95%;
  width: max-content;
  color: #333333;
  overflow: hidden;
  padding: 5px 5px 5px 5px;
  margin: 25px;
}

.threadReply:target {
  border: 1px solid #ffe9d3;
  background-color: #ffefdf;
}

.threadReply #replyInfo {
  border: none;
  font-family: arial;
  font-size: 13px;
  color: #333333;
  padding: 5px 10px 0px 5px;
}

.threadReply #replyCount {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 5px 10px 5px 5px;
}

.threadReply #replyInfo a {
  border: none;
  color: #0000EE;
  text-decoration: none;
}

.threadReply #replyInfo a:hover {
  border: none;
  color: #0000EE;
  text-decoration: underline;
}

.threadReply #replyInfo .replyLink {
  border: none;
  color: #0000EE;
  font-size: 12px;
  text-decoration: none;
}

.threadReply #replyVote {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 0px 10px 10px 5px;
}

.threadReply #replyVote a {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: none;
}

.threadReply #replyVote a:hover {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: underline;
}

.threadReply .replyImage-resize {
  border: 1px solid #DDDDDD;
  float: left;
  overflow: hidden;
  max-width: 125px;
  cursor: pointer;
  margin: 0px 15px 10px 10px;
}

.threadReply #replyMessage {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  padding: 0px 10px 10px 20px;
  float:left;
}

.threadReply #replyMessage a {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
}

.threadReply #replyMessage a:hover {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: underline;
}

<div class='threadReply'>
  <div id='replyInfo'>
    <p>Anonymous 06/08/2023 10:10:47 No.76 <a href='#nav' onclick='reply(this)'>[Reply]</a></p>
  </div>
  <div id='replyVote'>
    <p>[thread creator][Authentic]</p>
  </div>
  <div id='replyContent'>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKByNgCmuW5bGdNNG0kCxIItgmAsPzu0w_vQ&usqp=CAU' class='replyImage-resize'>
    <div id='replyMessage'>
      <p>>be mod/janny/retard/whatever<br> >get challenged<br> >ban
        <br> >still not providing proof<br>
        <br> many such cases</p>
    </div>
  </div>
  <div id='replyCount'>
    <p><a href='javascript:void(0);' class='reportReply'>[Report]</a></p>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

HTML CSS – Text randomly dropping below image

Answers