Gediminas Gediminas - 1 month ago 5
CSS Question

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;
}

Answer

Leave the float settings, use these instead:

.receiver {
  position: relative;
}

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

.receiverMessage {
  margin-left: 45px;
}

jsFiddle