Float right and float left on different lines

Question

I want to have an element floated left, followed by an element floated right, with both on separate lines. It's supposed to be a chat client where the text is displayed on the bottom of the messages div. For some reason, the sent and received messages end up on the same line.

Here is the html.

<div class="messages">
  <div class="message-list">
    <div class="message-row">
      <span class="sent-message">Hello world</span>
    </div>
    <div class="message-row">
      <span class="received-message">TESTING</span>
    </div>
  </div>
</div>

And the css

.messages {
  height: 500px;
  position: relative;
}

.message-list {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sent-message{
  float: right;
}

.received-message {
  float: left;
}

And the jsfiddle. https://jsfiddle.net/5pdad3tx/

Possible duplicate of [how do I get a new line, after using float:left?](http://stackoverflow.com/questions/2580772/how-do-i-get-a-new-line-after-using-floatleft) — Robby Cornelissen, Mar 02 '17 at 03:18

score 7 · Accepted Answer · answered Mar 02 '17 at 03:17

7

add this to your css.!

.message-row{
    clear:both;
}

Working FIDDLE

answered Mar 02 '17 at 03:17

Lakshman Kambam

1,498
13
20

mediaguru · Answer 2 · 2017-03-02T03:56:20.850

0

Add a <br /> after the first message-row div!

<div class="messages">
  <div class="message-list">
    <div class="message-row">
      <span class="sent-message">Hello world</span>
    </div><br />
    <div class="message-row">
      <span class="received-message">TESTING</span>
    </div>
  </div>
</div>

edited Mar 02 '17 at 03:56

answered Mar 02 '17 at 03:23

mediaguru

1,807
18
24

Thanks for the edit Obsidian Age. I had the line break in there but it was removed. – mediaguru Mar 02 '17 at 03:26
please add better solutions if you've.. just don't copy paste other user answers from the same page. it's so annoying.. :( – Lakshman Kambam Mar 02 '17 at 03:39

Float right and float left on different lines

2 Answers2