html - 如何将我的元素放入容器 div 中

Question

所以我有一个界面，我想在左边有一个侧边菜单，该区域的其余部分应该包含一个聊天字段。问题是聊天字段溢出了容器，一半的聊天字段超出了容器 div。

如何使用这些设置使容器中的聊天字段合适？该容器名为#chat-c​​anvas

这是一个 JSFiddle:https://jsfiddle.net/v5k1Lhgf/1/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
}

html, body, #body {
	background-color: #ffffff;
	font-size: 15px;
	color: #565656;
	width: 100%;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: 'roboto', sans-serif;
	font-weight: 300;
}
#body, .app html, body {
    background-color: #f9f9f9;
    font-size: 15px;
    color: #565656;
    width: 100%;
    height: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
    min-height: 100%;
}
html {
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: all 3s ease-in-out;
	height: 100%;
	min-height: 100%;
}
*,*:before,*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#chat-canvas {
    width: 94% !important;
    height: 100%;
    position: absolute;
    float: left;
    display: inline-block;
    overflow: hidden;
}
.app-nav {
    position: relative;
    height: 100%;
    width: 6%;
    display: inline-block;
}
.tl-menu {
    position: absolute;
    overflow: hidden;
    float: left;
    top: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #1b1e24;
    z-index: 9999;
}

.tl-menu img{
    max-height: 80%;
}

.tl-menu li a {
    display: block;
    height: 5em;
    width: 5em;
    line-height: 5em;
    text-align: center;
    color: #999;
    position: relative;
    border-bottom: 1px solid rgba(104,114,134,0.05);
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}

.tl-menu li a:hover,
.tl-menu li:first-child a{
    color: #55fec6;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tl-menu li a:active {
    background: #afdefa;
    color: #FFF;}

/* class for current item */
.tl-menu li.tl-current a {
    background: #343a47;
    color: #bbe6fe;
}

.tl-menu li a:before {
    font-family: 'entypo', sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.4em;
    -webkit-font-smoothing: antialiased;
}

.tl-menu li a.icon-logo:before {
    font-weight: 700;
    font-size: 300%;
}

/* ---------- CHAT ---------- */

.people-list {
    width: 30%;
    float: right;
}
.people-list .search {
    padding: 20px;
}
.people-list input {
    border-radius: 3px;
    border: none;
    padding: 14px;
    color: white;
    background: #6A6C75;
    width: 90%;
    font-size: 14px;
}
.people-list .fa-search {
    position: relative;
    left: -25px;
}
.people-list ul {
    padding: 20px;
    height: 770px;
}
.people-list ul li {
    padding-bottom: 20px;
}
.people-list img {
    float: left;
}
.people-list .about {
    float: left;
    margin-top: 8px;
}
.people-list .about {
    padding-left: 8px;
}
.people-list .status {
    color: #92959E;
}

.chat {
    width: 70%;
    float: left;
    position: absolute;
    background: #F2F5F8;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #434651;
}
.chat .chat-header {
    padding: 20px;
    border-bottom: 2px solid white;
}
.chat .chat-header img {
    float: left;
}
.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px;
    margin-top: 6px;
}
.chat .chat-header .chat-with {
    font-weight: bold;
    font-size: 16px;
}
.chat .chat-header .chat-num-messages {
    color: #92959E;
}
.chat .chat-header .fa-star {
    float: right;
    color: #D8DADF;
    font-size: 20px;
    margin-top: 12px;
}
.chat .chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 575px;
}
.chat .chat-history .message-data {
    margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
    color: #a8aab1;
    padding-left: 6px;
}
.chat .chat-history .message {
    color: white;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}
.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #86BB71;
    border-width: 10px;
    margin-left: -10px;
}
.chat .chat-history .my-message {
    background: #86BB71;
}
.chat .chat-history .other-message {
    background: #94C2ED;
}
.chat .chat-history .other-message:after {
    border-bottom-color: #94C2ED;
    left: 93%;
}
.chat .chat-message {
    padding: 30px;
}
.chat .chat-message textarea {
    width: 100%;
    border: none;
    padding: 10px 20px;
    font: 14px/22px "Lato", Arial, sans-serif;
    margin-bottom: 10px;
    border-radius: 5px;
    resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
    font-size: 16px;
    color: gray;
    cursor: pointer;
}
.chat .chat-message button {
    float: right;
    color: #94C2ED;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background: #F2F5F8;
}
.chat .chat-message button:hover {
    color: #75b1e8;
}

.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
}

.online {
    color: #86BB71;
}

.offline {
    color: #E38968;
}

.me {
    color: #94C2ED;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.chat-container {
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    margin: 0 auto;
    width: 750px;
    background: #444753;
    border-radius: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">

<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
    <li><a href="" class="icon-logo" style="pointer-events: none; cursor: default;"><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></a></li>
    <li><a href="#" class="user-picture" id="navItem1"><img src="{{user.picture}}"></a></li>
    <li><a href="activity" id="navItem2"><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="chat" id="navItem3"><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="map" id="navItem4"><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="#" id="navItem5"><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="/auth/logout" id="navItem6"><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></a></li>
</ul>
</div>
<!-- END NAV -->

<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
    <div class="people-list" id="people-list">
        <div class="search">
            <input type="text" placeholder="search" />
            <i class="fa fa-search"></i>
        </div>
        <ul class="list">
            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Vincent Porter</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Aiden Chavez</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 7 mins ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Mike Thomas</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Erica Hughes</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Ginger Johnston</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Tracy Carpenter</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 30 mins ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Christian Kelly</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 10 hours ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Monica Ward</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Dean Henry</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> offline since Oct 28
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Peyton Mckinney</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="activity-info">
    <div class="chat">
        <div class="chat-header clearfix">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />

            <div class="chat-about">
                <div class="chat-with">Chat with Vincent Porter</div>
                <div class="chat-num-messages">already 1 902 messages</div>
            </div>
            <i class="fa fa-star"></i>
        </div> <!-- end chat-header -->

        <div class="chat-history">
            <ul>
                <li class="clearfix">
                    <div class="message-data align-right">
                        <span class="message-data-time" >10:10 AM, Today</span> &nbsp; &nbsp;
                        <span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>

                    </div>
                    <div class="message other-message float-right">
                        Hi Vincent, how are you? How is the project coming along?
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:12 AM, Today</span>
                    </div>
                    <div class="message my-message">
                        Are we meeting today? Project has been already finished and I have results to show you.
                    </div>
                </li>

                <li class="clearfix">
                    <div class="message-data align-right">
                        <span class="message-data-time" >10:14 AM, Today</span> &nbsp; &nbsp;
                        <span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>

                    </div>
                    <div class="message other-message float-right">
                        Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:20 AM, Today</span>
                    </div>
                    <div class="message my-message">
                        Actually everything was fine. I'm very excited to show this to our team.
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:31 AM, Today</span>
                    </div>
                    <i class="fa fa-circle online"></i>
                    <i class="fa fa-circle online" style="color: #AED2A6"></i>
                    <i class="fa fa-circle online" style="color:#DAE9DA"></i>
                </li>

            </ul>

        </div> <!-- end chat-history -->

        <div class="chat-message clearfix">
            <textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>

            <i class="fa fa-file-o"></i> &nbsp;&nbsp;&nbsp;
            <i class="fa fa-file-image-o"></i>

            <button>Send</button>

        </div> <!-- end chat-message -->

    	</div> <!-- end chat -->
     </div>
	</div>
</div>
</body>

请检查整页的代码片段以获得更好的 View

Answer 1

在选择器 #chat-c​​anvas 中将 height: 100% 替换为 min-height: 100% 将使您的聊天 Canvas 覆盖其子聊天字段

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
}

html, body, #body {
	background-color: #ffffff;
	font-size: 15px;
	color: #565656;
	width: 100%;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: 'roboto', sans-serif;
	font-weight: 300;
}
#body, .app html, body {
    background-color: #f9f9f9;
    font-size: 15px;
    color: #565656;
    width: 100%;
    height: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
    min-height: 100%;
}
html {
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: all 3s ease-in-out;
	height: 100%;
	min-height: 100%;
}
*,*:before,*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#chat-canvas {
    width: 94% !important;
    min-height: 100%;
    position: absolute;
    float: left;
    display: inline-block;
    overflow: hidden;
}
.app-nav {
    position: relative;
    height: 100%;
    width: 6%;
    display: inline-block;
}
.tl-menu {
    position: absolute;
    overflow: hidden;
    float: left;
    top: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #1b1e24;
    z-index: 9999;
}

.tl-menu img{
    max-height: 80%;
}

.tl-menu li a {
    display: block;
    height: 5em;
    width: 5em;
    line-height: 5em;
    text-align: center;
    color: #999;
    position: relative;
    border-bottom: 1px solid rgba(104,114,134,0.05);
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}

.tl-menu li a:hover,
.tl-menu li:first-child a{
    color: #55fec6;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tl-menu li a:active {
    background: #afdefa;
    color: #FFF;}

/* class for current item */
.tl-menu li.tl-current a {
    background: #343a47;
    color: #bbe6fe;
}

.tl-menu li a:before {
    font-family: 'entypo', sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.4em;
    -webkit-font-smoothing: antialiased;
}

.tl-menu li a.icon-logo:before {
    font-weight: 700;
    font-size: 300%;
}

/* ---------- CHAT ---------- */

.people-list {
    width: 30%;
    float: right;
}
.people-list .search {
    padding: 20px;
}
.people-list input {
    border-radius: 3px;
    border: none;
    padding: 14px;
    color: white;
    background: #6A6C75;
    width: 90%;
    font-size: 14px;
}
.people-list .fa-search {
    position: relative;
    left: -25px;
}
.people-list ul {
    padding: 20px;
    height: 770px;
}
.people-list ul li {
    padding-bottom: 20px;
}
.people-list img {
    float: left;
}
.people-list .about {
    float: left;
    margin-top: 8px;
}
.people-list .about {
    padding-left: 8px;
}
.people-list .status {
    color: #92959E;
}

.chat {
    width: 70%;
    float: left;
    position: absolute;
    background: #F2F5F8;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #434651;
}
.chat .chat-header {
    padding: 20px;
    border-bottom: 2px solid white;
}
.chat .chat-header img {
    float: left;
}
.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px;
    margin-top: 6px;
}
.chat .chat-header .chat-with {
    font-weight: bold;
    font-size: 16px;
}
.chat .chat-header .chat-num-messages {
    color: #92959E;
}
.chat .chat-header .fa-star {
    float: right;
    color: #D8DADF;
    font-size: 20px;
    margin-top: 12px;
}
.chat .chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 575px;
}
.chat .chat-history .message-data {
    margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
    color: #a8aab1;
    padding-left: 6px;
}
.chat .chat-history .message {
    color: white;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}
.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #86BB71;
    border-width: 10px;
    margin-left: -10px;
}
.chat .chat-history .my-message {
    background: #86BB71;
}
.chat .chat-history .other-message {
    background: #94C2ED;
}
.chat .chat-history .other-message:after {
    border-bottom-color: #94C2ED;
    left: 93%;
}
.chat .chat-message {
    padding: 30px;
}
.chat .chat-message textarea {
    width: 100%;
    border: none;
    padding: 10px 20px;
    font: 14px/22px "Lato", Arial, sans-serif;
    margin-bottom: 10px;
    border-radius: 5px;
    resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
    font-size: 16px;
    color: gray;
    cursor: pointer;
}
.chat .chat-message button {
    float: right;
    color: #94C2ED;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background: #F2F5F8;
}
.chat .chat-message button:hover {
    color: #75b1e8;
}

.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
}

.online {
    color: #86BB71;
}

.offline {
    color: #E38968;
}

.me {
    color: #94C2ED;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.chat-container {
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    margin: 0 auto;
    width: 750px;
    background: #444753;
    border-radius: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">

<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
    <li><a href="" class="icon-logo" style="pointer-events: none; cursor: default;"><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></a></li>
    <li><a href="#" class="user-picture" id="navItem1"><img src="{{user.picture}}"></a></li>
    <li><a href="activity" id="navItem2"><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="chat" id="navItem3"><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="map" id="navItem4"><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="#" id="navItem5"><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></a></li>
    <li><a href="/auth/logout" id="navItem6"><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></a></li>
</ul>
</div>
<!-- END NAV -->

<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
    <div class="people-list" id="people-list">
        <div class="search">
            <input type="text" placeholder="search" />
            <i class="fa fa-search"></i>
        </div>
        <ul class="list">
            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Vincent Porter</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Aiden Chavez</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 7 mins ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Mike Thomas</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Erica Hughes</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Ginger Johnston</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Tracy Carpenter</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 30 mins ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Christian Kelly</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> left 10 hours ago
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Monica Ward</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Dean Henry</div>
                    <div class="status">
                        <i class="fa fa-circle offline"></i> offline since Oct 28
                    </div>
                </div>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
                <div class="about">
                    <div class="name">Peyton Mckinney</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="activity-info">
    <div class="chat">
        <div class="chat-header clearfix">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />

            <div class="chat-about">
                <div class="chat-with">Chat with Vincent Porter</div>
                <div class="chat-num-messages">already 1 902 messages</div>
            </div>
            <i class="fa fa-star"></i>
        </div> <!-- end chat-header -->

        <div class="chat-history">
            <ul>
                <li class="clearfix">
                    <div class="message-data align-right">
                        <span class="message-data-time" >10:10 AM, Today</span> &nbsp; &nbsp;
                        <span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>

                    </div>
                    <div class="message other-message float-right">
                        Hi Vincent, how are you? How is the project coming along?
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:12 AM, Today</span>
                    </div>
                    <div class="message my-message">
                        Are we meeting today? Project has been already finished and I have results to show you.
                    </div>
                </li>

                <li class="clearfix">
                    <div class="message-data align-right">
                        <span class="message-data-time" >10:14 AM, Today</span> &nbsp; &nbsp;
                        <span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>

                    </div>
                    <div class="message other-message float-right">
                        Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:20 AM, Today</span>
                    </div>
                    <div class="message my-message">
                        Actually everything was fine. I'm very excited to show this to our team.
                    </div>
                </li>

                <li>
                    <div class="message-data">
                        <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
                        <span class="message-data-time">10:31 AM, Today</span>
                    </div>
                    <i class="fa fa-circle online"></i>
                    <i class="fa fa-circle online" style="color: #AED2A6"></i>
                    <i class="fa fa-circle online" style="color:#DAE9DA"></i>
                </li>

            </ul>

        </div> <!-- end chat-history -->

        <div class="chat-message clearfix">
            <textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>

            <i class="fa fa-file-o"></i> &nbsp;&nbsp;&nbsp;
            <i class="fa fa-file-image-o"></i>

            <button>Send</button>

        </div> <!-- end chat-message -->

    	</div> <!-- end chat -->
     </div>
	</div>
</div>
</body>