Как сделать ширину меньше?

Question

[Elbakidze]

Как сделать вот такую ширину как на фото?
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 блока сообщения

Comments

[n1ksON]

Недостаточно кода! Для решения проблемы загрузите сюда код всего проекта

[Elbakidze]

n1ksON, CSS стили блока сообщения

.chatMessageBlock {
  width: 92%;
  margin: 0px auto 0px;
  padding: 3px 3px;
}
.chatMessageHeader {
  font-size: 14px;
  padding: 2px;
}
.chatMessageAuthorBlock {
  font-weight: bold;
  float:left;
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -o-user-select: none; 
}
.chatMessageInfoBlock {
  color: rgb(100,100,100);
  float: right;
}
.messageChangeDeleteButtons {
  float: right;
  padding: 3px 0px 0px;
  z-index:10;
}
.messageBottomButtons {
  font-size: 75%;
  margin-top: 5px;
}
.replyButtons {
  color: gray;
}
.replyButtons a {
  color: gray;
}
.replyButtons a:hover {
  color: rgb(10,10,10);
}
.datetime {
  font-weight: normal;
  color: gray;
}
.chatMessageMbl {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-right: -25px;
}
.chatMessageTextBlock {
  padding: 5px 3px 3px;
  word-wrap: break-word;
}
.voteButton {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: transparent;
  vertical-align: -3px;
}
.voteButton:hover {
  /*font-weight: bold;*/
}
.voteButton:active {
  
}
.voteUp {
  /*background-image: url('/icons/round-rating-thumbs-16.png');
  background-position: top left;*/
}
.voteDown {
  /*background-image: url('/icons/round-rating-thumbs-16.png');
  background-position: top right;*/
}
.userPhotoBlock {
  float: left;
  width: 50px;
  max-width: 50px;
  height: 50px;
  max-height: 50px;
  margin: 1px;
  border: 1px solid rgb(240,240,240);
  border-radius: 3px;
  text-align: center;
}
.userPhoto {
  width: 50px;
  max-height: 50px;
  display: block;
  border-radius: 3px;
}
.messageBlock {
  overflow: hidden;
  padding-left: 6px;
}
.banButton {
  font-family: FontAwesome;
  display:inline-block;
  cursor: pointer;
  color: gray;
  font-weight: normal;
}
.banButton:hover {
  color: rgb(237,28,36);
}
.banButton:before {
  content: "\f05e";
}
.deleteButton {
  font-family: FontAwesome;
  display:inline-block;
  height: 16px;
  width: 16px;
  cursor: pointer;
  color: gray;
  opacity: 0.5;
}
.deleteButton:before {
  content: "\f1f8";
}
.deleteButton:hover {
  color: rgb(237,28,36);
  opacity: 1;
}
.changeButton {
  font-family: FontAwesome;
  display:inline-block;
  height: 16px;
  width: 16px;
  cursor: pointer;
  color: gray;
  opacity: 0.5;
}
.changeButton:before {
  content: "\f040";
}
.changeButton:hover {
  color: orange;
  opacity: 1;
}
.likeButton {
  opacity: 0.5;
  font-size: 16px;
  font-family: FontAwesome;
  display:inline-block;
  color: gray;
  cursor: pointer;
}
.likeButton:hover, .likeButton.active {
  color: green
}
.likeButton:before {
  content: "\f087";
}
.dislikeButton {
  opacity: 0.5;
  font-size: 16px;
  font-family: FontAwesome;
  display:inline-block;
  color: gray;
  cursor: pointer;
}
.dislikeButton:hover, .dislikeButton.active {
  color: red;
}
.dislikeButton:before {
  content: "\f088";
}

HTML блока сообщения

<div class="chatMessageBlock" {elem:messageBlock}>
  <div class="userPhotoBlock">
    <img src="/icons/anon.gif" class="userPhoto" {elem:userPhoto}>
  </div>
  <div class="messageBlock">
    <div class="chatMessageMbl"><div class="chatMessageHeader">
      <div class="chatMessageAuthorBlock">
        {text:userName} <span {elem:banUserButton} title="{text:banUser}" class="banButton"></span>
      </div>
      <span class="datetime">&nbsp;• {text:messageDatetime}</span>
      <div class="clear"></div>
    </div>
    <div class="chatMessageTextBlock">
      {text:messageText}
      {elem:attachments}
      <div class="messageBottomButtons">
        <span {elem:messageRating}>{text:ratingOnLoad}</span>
        <span class="voteButton likeButton" {elem:voteUp}></span>
        <span class="voteButton dislikeButton" {elem:voteDown}></span>
        <span class="replyButtons">
          <span {elem:messageReplyTo}> • {text:replyToM} <a href="javascript:void(0)"  {elem:replyToLink}>{text:mess}</a> • </span>
          <a href="javascript:void(0)" {elem:replyButton}>{text:reply}</a>
        </span>
      </div>
    </div></div>
    <div class="messageChangeDeleteButtons">
      <span {elem:deleteButton} title="{text:delete}" class="deleteButton"></span>
      <br/>
      <span {elem:changeButton} title="{text:change}" class="changeButton"></span>
    </div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

[Elbakidze]

n1ksON, Подскажите как сделать?

Answer 1

[g33km]

Один из вариантов - высчитать вручную наибольшую ширину в px/% и задать для класса

.chatContainer {
max-width: значение;
}

Где "значение" - высчитанное значение максимальной ширины (например, 80% - тогда блок с отправкой сообщения будет занимать 80% от ширины родителя)