Проблема с переполнением CSS div

Question

Я пытаюсь создать простую комнату чата, используя CSS, которые состоят из их сообщения и их имени пользователя. То, что я сделал, это то, что я завернул сообщение и имя пользователя внутри <div>. Проблема возникает, когда сообщение переходит через <div>. Он не подталкивает другие <div> s, содержащие другое сообщение ниже.

Спасибо, что помогли мне.

здесь jsiddle

http://jsfiddle.net/gjuv8/

CSS

body { background-color: #535954} 
.box22 { content: "";display: block;clear: both;background-color: #FFFFFF;width: 500px;height:400px;position: relative;left: 450px;top: 230px; } 

.user{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;float:right;position: relative;left: -20px;top: 0px;} 
.message{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;float:left;position: relative;left: 10px;top: 40px;} 
.wrapper{position: relative;left: 10px;top: 50px;background-color: #FFFFFF;width: 480px;height: 100px} 

HTML

<link rel="stylesheet" href="css/float.css"> 
<div class="box22"> 

<div class="wrapper"> 
<span class="user">johnny123 </span> 
<span class="message">message message overflow message message overflowmessage message overflowmessage message overflowmessage message overflow</span> 
</div> 

<div class="wrapper">d 
<span class="user">glasses glasses </span> 
<span class="message">michael </span> 
</div> 
</div> 

Answer 1

Есть много изменить, чтобы сделать его работу

body { background-color: #535954} 
    .box22 { content: "";display: block;clear: both;background-color: #FFFFFF;width: 500px;height:400px;position: relative;left: 450px;top: 230px; } 

    .user{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;text-align:right} 
    .message{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;} 
    .wrapper{position:relative;background-color: #FFFFFF;width: 480px;} 

Отъезд demo здесь

Answer 2

может я уверен попробовать этот CSS:

body { 
    background-color: #535954 
} 
.box22 { 
    content: ""; 
    display: block; 
    clear: both; 
    background-color: #FFFFFF; 
    width: 500px; 
    height: 400px; 
    position: relative; 
    left: 450px; 
    top: 230px; 
} 
.user { 
    font-size: 18px; 
    font-family: Arial; 
    color: #3A3E42; 
    font-weight: bold; 
    float: right; 
    position: relative; 
    left: -20px; 
    top: 0px; 
} 
.message { 
    font-size: 18px; 
    font-family: Arial; 
    color: #3A3E42; 
    font-weight: bold; 
    float: left; 
    position: absolute; 
    left: 10px; 
    top: 32px; 
} 
.wrapper { 
    position: relative; 
    left: 10px; 
    top: 50px; 
    background-color: #FFFFFF; 
    width: 480px; 
    height: 100px 
    margin:5px 0; 
} 

Источник HTML:

<div class="box22"> 
    <div class="wrapper"> <span class="user">johnny123 </span> <span class="message">message message overflow message message overflowmessage message overflowmessage message overflowmessage message overflow</span> </div> 
    <div class="wrapper"> <span class="user">glasses glasses </span> <span class="message">michael </span> </div> 
</div> 

Answer 3

Я думаю, что это может работать для u, независимо от того, чтобы уменьшить код ur. Для сообщений и имени u положите один контейнер div. просто поместите float: left; min-height: «некоторая требуемая высота»; высота: авто; для ур контейнер div. это просто приведет вас к увеличению высоты

Answer 4

Вы просто устанавливаете много статических высот и ширины ... я бы сделал это, как код ниже ... дайте мне знать, если это сработает для ваших нужд, ура

CSS:

body { 
     background-color: #535954 
    } 

    .box22 { 
     position: relative; 
     display: block; 
     width: 50%; 
     margin: 0 auto; 
     background-color: #FFFFFF; 
     position: relative; 
    } 

    .user { 
     position: relative; 
     font-size: 18px; 
     font-family: Arial; 
     color: #3A3E42; 
     font-weight: bold; 
     text-align: right; 
     padding: 2%; 
    } 

    .message { 
     position: relative; 
     font-size: 18px; 
     font-family: Arial; 
     color: #3A3E42; 
     font-weight: bold; 
    } 

    .wrapper { 
     position: relative; 
     background-color: #FFFFFF; 
    } 

HTML:

<div class="box22"> 
    <div class="wrapper"> 
     <div class="user">johnny123 </div> 
     <div class="message">message 
      message overflow message message overflowmessage message 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
     </div> 
    </div> 

    <div class="wrapper"> 
     <div class="user">glasses glasses </div> 
     <div class="message"> 
      michael 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
     </div> 
    </div> 
</div>