html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: none;
margin-top: 0;
nargin-right: 0;
padding: 0;
overflow: hidden;
}
#cbox {
border: 1px black solid;
width: 99.0%;
height: 89.0%;
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
}
.message {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 50px;
max-height: 150px;
height: 50px;
width: 98.9%;
border: 1px black solid;
margin-top: 10px;
margin-left: 3px;
margin-bottom: 3px;
}
#snd-msg {
width: 97%;
height: calc(4% +50px);
overflow: hidden;
margin-bottom: 0px;
}
.pimg {
height: 45px;
width: 45px;
border: 1px black dashed;
margin-left: 3px;
margin-right: 3px;
margin-top: 2px;
margin-bottom: 2px;
vertical-align: middle;
}
.username {
margin-right: 3px;
margin-bottom: 2px;
text-decoration: underline;
}
.date {
_float: right;
float: right;
color: gray;
background-color: #dbdbdb;
font-family: monospace;
font-size: 8px;
margin-right: 10px;
}
.title {
height: 150px;
width: 100%;
margin-left: 5px;
font-size: 10px;
}
.ctext { font-family: monospace; font-size: 9px; font-weight: 600; color: blue; float: right; _float: right; margin-right: 18px;}<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<div class="container">
<span class="title" id="title">Room Title</span>
<div id="cbox">
<div class="message">
<img class="pimg" src="https://otku.ga/images/tink.jpg"><span class="date">7/28/2017 - 4:0:34</span><span><span class="username" style="">tink</span><span class="text" style="font-size: 12px; font-family: monospace;">Donec orci metus, tempor et luctus ut, convallis non dui. Quisque mattis quis nulla quis laoreet. Morbi rutrum diam tellus, in volutpat nunc facilisis vitae. Nullam vitae ornare est, non congue turpis. Donec vel vehicula dolor, ut commodo enim. Donec sollicitudin nisi mi, vel facilisis quam aliquet faucibus. Vivamus venenatis laoreet lacus, ornare elementum nisl eleifend et. Fusce viverra vel purus quis ultricies. Nunc tempus dignissim ligula et condimentum. In ut dignissim urna, nec feugiat mi. Maecenas rutrum ipsum eget lacus suscipit, sit amet interdum nibh placerat. </span></span>
</div>
<span class="ctext">People: <span id="count">0</span></span>
<input type="text" id="snd-msg" placeholder="Enter a message.." />
</div>I can't seem to solve this issue for the life of me. My goal is to achieve complete responsiveness for this chat interface. However, it's proving to be quite challenging. I aim to limit the message length to a maximum of 150px while keeping everything properly aligned. An example of the desired layout can be found here.