Search code examples
htmlcssstyling

Messenger/sms-type styling

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?

Solution

  • 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>