CSS div overflow problem

Question

I am trying to create a simple chat room using CSS, which consists of their message and their username. I did that I wrapped the message and username inside the <div> . The problem occurs when the message goes through the <div> . It does not click on another <div> containing another message below.

Thanks for helping me.

here 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

There are many changes to make it work.

  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;} 

Check out the demo here.

Answer 2

Can I try this 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 source:

 <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

I think this can work for u, regardless of reducing ur code. For messages and the name u, put one container div. just put float: left; min-height: "some required height"; height: car; for ur container div. it will just make u have increased height

Answer 4

You just set a lot of static heights and widths ... I would do it like the code below ... let me know if it works for your need, greetings

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>