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

Messenger/sms-type styling – Html

I’m trying to write some basic HTML to display an SMS or Messenger style output.

For some reason I’m having trouble showing the entries on different rows, with sent messages shown on the right and received on the left, and with an expanding height and width for each message.

For example, this version of the HTML is ok except all messages appear on the left. I appreciate that the "from" divs need to be position: absolute really but that causes the rows to overlay, as you might expect.

body {
  background-color: black;
  color: white;
}

div.container {
  display: inline-block;
  position: absolute;
  width: 100%;
  font-family: Arial;
}

div.row {
  display: inline-block;
  position: relative;
  left: 0;
  width: 100%;
  height: auto;
  padding: 3px;
}

div.from {
  display: inline-block;
  position: relative;
  right: 0;
  max-width: 300px;
  background-color: blue;
  color: white;
  border-radius: 15px;
  padding: 10px;
}

div.to {
  display: inline-block;
  position: relative;
  left: 0;
  max-width: 300px;
  background-color: white;
  color: black;
  border-radius: 15px;
  padding: 10px;
}
<div class="container">
  <div class="row">
    <div class="from">
      There once was a man from Caracus, who was larking about like a jackass!
    </div>
  </div>
  <p />
  <div class="row">
    <div class="to">
      Hey!
    </div>
  </div>
  <p />
  <div class="row">
    <div class="from">
      What's up;
    </div>
  </div>
  <p />
  <div class="row">
    <div class="to">
      The sky?? :p
    </div>
  </div>
  <p />
  <div class="row">
    <div class="from">
      Ha ha.
    </div>
  </div>
  <p />
  <div class="row">
    <div class="to">
      Not much. You?
    </div>
  </div>
  <p />
  <div class="row">
    <div class="from">
      Yeah not much.
    </div>
  </div>
</div>

enter image description here

I’ve tried playing around with display and position types, and also differnt elements (the paragraph tags weren’t there to start with).

I’m trying to avoid using a table.

Is there a change I can make to the styling to get what I want or am I totally barking up the wrong tree here?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Actually just fixed it using float: right; and float: left;.

    I had tried this before but without clear: both; which is necessary.

    div.from {
    display: inline-block;
    position: relative;
    float: right;
    clear: both;
    max-width: 300px;
    background-color: blue;
    color: white;
    border-radius: 15px;
    padding: 10px;
}
div.to {
    display: inline-block;
    position: relative;
    float: left;
    clear: both;
    max-width: 300px;
    background-color: white;
    color: black;
    border-radius: 15px;
    padding: 10px;
}

    enter image description here


  2. 0

    A more modern approach would be to use flexbox.

    Set display: flex on each row (flex-direction: row). Then if you want the text to be at the right, apply justify-content: flex-end; or if you want the text on the left, apply justify-content: flex-start.

    More information on flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    This type of layout scales more gracefully on the modern web, which needs to support many different view ports, devices, etc. And, if you peek at that article, there’s a lot more tweaking and adjustments you can do that you simply don’t have available using an old-school float-based layout.

    Here’s your full example. Note that I replaced the incorrect <p> tags; <p> is for text paragraphs, not for forcing whitespace between blocks elements. (It was replaced with a simple margin-bottom.)

    body {
  background-color: black;
  color: white;
  font-family: Arial;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row {
  width: 100%;
  height: auto;
  padding: 3px;
  margin-bottom: 1em;
  display: flex;
  flex-direction: row;
}

.from {
  justify-content: flex-end;
}

.to {
  justify-content: flex-start;
}

.content {
  max-width: 300px;
  border-radius: 15px;
  padding: 10px;
}

.from .content {
  background-color: blue;
  color: white;
}

.to .content {
  background-color: white;
  color: black;
}
    <div class="container">
  <div class="row from">
    <div class="content">
      There once was a man from Caracus, who was larking about like a jackass!
    </div>
  </div>
  <div class="row to">
    <div class="content">
      Hey!
    </div>
  </div>
  <div class="row from">
    <div class="content">
      What's up;
    </div>
  </div>

  <div class="row to">
    <div class="content">
      The sky?? :p
    </div>
  </div>

  <div class="row from ">
    <div class="content">
      Ha ha.
    </div>
  </div>

  <div class="row to">
    <div class="content">
      Not much. You?
    </div>
  </div>

  <div class="row from">
    <div class="content">
      Yeah not much.
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You can simplify your HTML greatly. There is no real need for additional containers.

    body {
  background-color: black;
  color: white;
}

div.container {
  width: 100%;
  font-family: Arial;
}

div.row { 
  max-width: 300px;  
  min-width: 150px;
  margin-bottom:2em;
  height: auto;
  padding: 3px;
  border-radius: 15px;
  padding: 10px;
  clear:both;
}

div.row.from { 
  background-color: blue;
  color: white; 
  float:right;
  
}

div.row.to {  

  float:left;
  background-color: white;
  color: black;
  
}
    <div class="container">
    <div class="row from">There once was a man from Caracus, who was larking about like a jackass!</div>
    <div class="row to">Hey!</div>
    <div class="row from">What's up;</div>
    <div class="row to">The sky?? :p</div>
    <div class="row from">Ha ha.</div>
    <div class="row  to">Not much. You?</div>
    <div class="row from">Yeah not much.</div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search