CODEWITHSUNDEEP
htmlcss
Gediminas Šukys
Gediminas Šukys

Reputation: 7391

fixed-width and auto-width divs in one line

I have chat window where I want to put photo and message next to photo. Conversation window must be responsive and message div auto-adjustable to the screen. But I can't find any way to do this, because once message has few lines of text, it drops to the next line.

If I use table, I can't make fixed-width photo TD. If I use DIVS, I can't do auto-width message DIV :)

Here is JSFiddle with an example: https://jsfiddle.net/s95tdcLw/3/

HTML:

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit
  </div>
</div>

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
  </div>
</div>

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
    eu mattis nisi turpis vel lectus.
  </div>
</div>

CSS:

.receiver {
  clear: both;
  padding-top: 1rem;
}

.receiverPhoto {
  float: left;
  width: 40px;
  height: 40px;
  background: blue;
  border-radius: 20px;
}

.receiverMessage {
  float: left;
  width: auto;
  background: rgb(230, 230, 230);
  border-radius: 10px;
  margin-left: 0.5rem;
  padding: 10px;
}

Upvotes: 1

Views: 1075

Answers (2)

try-catch-finally
try-catch-finally

Reputation: 7634

Your .receiverMessage element should not float and it should reserve left-margin space for the .receiverPhoto element.

.receiverMessage {
  /* should not float */
  width: auto;
  background: rgb(230, 230, 230);
  border-radius: 10px;
  margin-left: 50px; /* reserve space of .receiverPhoto width */
  padding: 10px;
}

See the forked Fiddle: https://jsfiddle.net/092b077c/

In response to your comment how to make it work for the opposite...

I'd use the classes on the wrapping div elements to determine the message type. In my example I introduce a new class .sender. Now I create four selectors that determine whether the photo element floats left or right and whether the message element has left or right padding:

New CSS:

.sender .receiverPhoto {
  float: right;
}
.sender .receiverMessage {
  margin-right: 50px;
}

.receiver .receiverPhoto {
  float: left;
}
.receiver .receiverMessage {
  margin-left: 50px;
}

HTML:

<div class="sender">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">...</div>
</div>

Now the .receiverPhoto and .receiverMessage styles do not need to declare margin or float.

See the updated Fiddle: https://jsfiddle.net/092b077c/1/

Upvotes: 1

Itay
Itay

Reputation: 16777

Leave the float settings, use these instead:

.receiver {
  position: relative;
}

.receiverPhoto {
  position: absolute;
  left: 0;
}

.receiverMessage {
  margin-left: 45px;
}

jsFiddle

Upvotes: 2

Related Questions