Как сделать вот такую ширину как на фото?
CSS стили формы системы комментирования
/*.zeroCommentsCount:before {
content: "No one has posted a comment yet"!important;
}*/
.sendNotAvail:before {
content: "Возможность комментирования недоступна"!important;;
}
.showSortButton {
cursor: pointer;
color: rgb(80,80,80);
}
.showSortButton:hover {
color: black;
}
.sortLinks {
display: none;
}
.social_auth_buttons {
}
.activeMessage {
background: rgb(250,250,250);
}
.ratingBarBlock {
float: right;
height: 50px;
padding: 10px 10px 0px 0px;
}
.ok_auth_button {
display: inline-block;
background: url(http://sigcomments.com/icons/ok.png) transparent no-repeat no-repeat;
background-size: 100% 100%;
width: 22px;
height: 30px;
cursor: pointer;
}
/*
.twitter_auth_button {
display: inline-block;
background: url(/icons/twitter.png) transparent no-repeat no-repeat;
width: 32px;
height: 32px;
cursor: pointer;
}*/
.vk_auth_button {
color: rgb(76,117,163);
margin-top: 4px;
margin-right: 6px;
display: inline-block;
width: 32px;
height: 32px;
font-size: 2.1em;
cursor: pointer;
font-family: FontAwesome;
}
.vk_auth_button:before {
content: "\f189";
}
/*.ok_auth_button {
color: rgb(245,130,32);
margin-top: 4px;
margin-right: 6px;
display: inline-block;
width: 32px;
height: 32px;
font-size: 2.1em;
cursor: pointer;
font-family: Arial;
}
.ok_auth_button:before {
content: "Ok";
}*/
.twitter_auth_button {
color: rgb(39,170,225);
margin-top: 4px;
display: inline-block;
width: 32px;
height: 32px;
font-size: 2.1em;
cursor: pointer;
font-family: FontAwesome;
}
.twitter_auth_button:before {
content: "\f081";
}
.facebook_auth_button {
color: rgb(60,89,159);
margin-top: 4px;
display: inline-block;
width: 32px;
height: 32px;
font-size: 2.1em;
cursor: pointer;
font-family: FontAwesome;
}
.facebook_auth_button:before {
content: "\f082";
}
.chatContainer {
font-family: Arial;
background-color: white;
right:0px;
bottom:0px;
padding: 0px;
border: 2px solid rgb(198,198,198);
overflow: hidden;
position: relative;
margin: 5px;
border-radius: 5px;
}
.chatBlockHeader {
font-size: 18px;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
margin-left: 3%;
margin-right:3%;
padding-right: 15px;
/*line-height: 50px;
white-space: nowrap;*/
/*width: 100%;
display: table-cell;*/
/*display:inline-block; vertical-align:middle;*/
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
float: left;
}
.chatBlockSendMessageForm {
/*height: 100px;*/
}
.chatBlockSendMessageButtonBlock {
width: 92%;
margin: 0px auto 0px;
}
.chatBlockSendMessageButton {
float:right;
}
.chatBlockUploadPhotoButton {
cursor: pointer;
width: 32px;
height: 26px;
float:right;
/*background-image: url(/icons/camera_1.jpeg);
background-color: transparent;
background-repeat: no-repeat no-repeat;
background-position: 0px 0px;
border: 0px solid transparent;*/
color: rgb(41,150,204);
margin-top: 3px;
font-size: 1.6em;
outline: none;
}
.chatBlockUploadPhotoButton:hover {
color: rgb(37,134,183);
}
.chatBlockHeaderText {
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
.logOutButton {
cursor: pointer;
float: right;
color: rgb(37,134,183);
font-size: 1.4em;
padding: 1px;
}
.logOutButton i {
vertical-align: -3px;
margin-left: 5px;
}
.logOutButton span {
font-size: 0.7em;
}
.bottomInfo {
text-align: right;
}
.loginForm {
float: right;
display: none;
margin-top: 10px;
}
.loginForm div {
padding: 3px;
}
.loginForm div span {
float:left;
line-height: 25px;
padding-right: 7px;
}
.loginFormInput {
padding: 3px;
margin: 0px;
float:right;
font-size: 16px;
}
.loginFormButton {
float: right;
}
.orderLinks {
color: inherit;
text-decoration: none;
margin-right: 7px;
cursor: pointer;
}
.orderLinks:hover {
text-decoration: underline;
}
.messageAtt {
margin: 5px;
cursor: pointer;
float: left;
}
.loadMoreButton {
padding: 4px;
margin: 10px auto;
cursor: pointer;
border: none;
}
.lMBBlock {
text-align: center;
padding: 10px;
}
.blueButton {
display: inline-block;
margin: 3px 0px 0px;
cursor: pointer;
text-decoration: none;
color: white;
text-transform: uppercase;
font-weight: bold;
line-height: 25px;
padding: 0px;
text-align: center;
background-color: rgb(41,150,204);
font-size: 0.7em;
padding: 0px 24px;
border-radius: 3px;
}
.blueButton:hover {
background-color: rgb(37,134,183);
}
.btn {
cursor: pointer;
background: #67afdb;
background-image: -webkit-linear-gradient(top, #67afdb, #0b68a1);
background-image: -moz-linear-gradient(top, #67afdb, #0b68a1);
background-image: -ms-linear-gradient(top, #67afdb, #0b68a1);
background-image: -o-linear-gradient(top, #67afdb, #0b68a1);
background-image: linear-gradient(to bottom, #67afdb, #0b68a1);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 0px 1px #666666;
-moz-box-shadow: 0px 0px 1px #666666;
box-shadow: 0px 0px 1px #666666;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 5px 8px 5px 8px;
border: solid #0b68a1 0px;
text-decoration: none;
}
.btn:hover {
background: #0b68a1;
background-image: -webkit-linear-gradient(top, #0b68a1, #0b68a1);
background-image: -moz-linear-gradient(top, #0b68a1, #0b68a1);
background-image: -ms-linear-gradient(top, #0b68a1, #0b68a1);
background-image: -o-linear-gradient(top, #0b68a1, #0b68a1);
background-image: linear-gradient(to bottom, #0b68a1, #0b68a1);
text-decoration: none;
}
.sc_userPhoto {
float: left;
}
.sc_userPhoto img {
width: 50px; height: 50px;
}
.sc_sendTextarea {
position:relative;
margin-left: 70px;
}
.chatBlockSendMessageTextarea {
border: 2px solid rgb(200,200,200);
background-color:white;
height: 50px;
padding: 5px;
font-family: Arial;
border-radius: 5px;
outline: none;
overflow-y: hidden;
font-size: 16px;
width: 100%;
float: right;
}
HTML формы системы комментирования
<div class="chatContainer borderRadius" {elem:chatContainer}>
<div class="chatBlockHeader borderRadius" {elem:header}>
{text:header}
{text:commentsCount} {text:commentsCountWord}
</div>
<div class="ratingBarBlock">{elem:ratingBar}</div>
<div class="clear"></div>
<div class="chatBlockSendMessageButtonBlock">
<div class="logOutButton" title="{text:logOutButton}" {elem:logOutButton}>
<span>{text:userName}</span><i class="fa fa-sign-out"></i></div>
<div class="clear"></div>
</div>
<div class="chatBlockSendMessageForm" {elem:chatBlockSendMessageForm}>
<div style="width: 92%; margin: 10px auto;">
<div class="sc_userPhoto">
<img src="/icons/anon.gif" {elem:userPhoto}>
</div>
<div class="sc_sendTextarea">
<textarea placeholder="{text:helloText}" class="chatBlockSendMessageTextarea" {elem:sendTextarea}></textarea>
</div>
<div class="clear"></div>
</div>
<div class="chatBlockSendMessageButtonBlock">
<div class="chatBlockSendMessageButton blueButton" {elem:sendButton}>
{text:sendButton}
</div>
<i class="fa fa-camera chatBlockUploadPhotoButton" alt="{text:uploadButton}" {elem:uploadButton}></i>
<div class="clear"></div>
<div class="loginForm" {elem:loginForm}>
<form onsubmit="return false;">
<div>
<span>{text:enterName}:</span><br/><input type="text" class="loginFormInput userName" {elem:enterNameInput}>
</div>
<div>
<div class="clear"></div>
<span>{text:enterEmail}:</span><br/><input type="text" class="loginFormInput userEmail" {elem:enterEmailInput}></div>
<div>
<div class="clear"></div>
<button class="loginFormButton" {elem:loginFormButton}>{text:loginFormButton}</button>
</div>
<div class="clear"></div>
{text:socialLogin}
<div class="social_auth_buttons">
<span class="vk_auth_button" {elem:vk_auth}></span>
<span class="twitter_auth_button" {elem:twitter_auth}></span>
<span class="facebook_auth_button" {elem:facebook_auth}></span>
<span class="ok_auth_button" {elem:ok_auth}></span>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<div style="padding: 7px 4% 1.3em;">
<div class="showSortButton" onclick="$(this).hide();$('.sortLinks').fadeIn(200);">
{text:sortButton} <i class="fa fa-caret-down"></i>
</div>
<div class="sortLinks">
<span class="orderLinks" {elem:idDescOrderButton}>{text:idDescOrderButton}</span>
<span class="orderLinks" {elem:ratingDescOrderButton}>{text:ratingDescOrderButton}</span>
</div>
</div>
{elem:messages}
<div class="lMBBlock"><button class="loadMoreButton blueButton" {elem:loadMoreButton}>{text:loadMore}</button></div>
</div>
CSS стили блока сообщения
HTML блока сообщения