I have a big problem i was working on a chat system and designing the chat but i found i big problem which is my div is expanding horizontally and i want it to expand regular ( vertically ) and i tried alot of thing like clearfix and nothing happens !!!
<div class="nchat">
<img class="chatimg" src="img/attach_1.jpg">
<div class="chatcontent">Hi</div>
<div class="sendt"><img width="10" height="10" src="img/star.png"> 14:20</div>
</div>
.nchat {
min-height: 40px;
}
.sendt {
background: none repeat scroll 0 0 #EFFFFF;
border-bottom: 1px solid #0099CC;
border-radius: 0 7px 7px 0;
border-right: 1px solid #0099CC;
border-top: 1px solid #0099CC;
color: #000000;
float: left;
font-size: 12px;
line-height: 13px;
margin: 12px 0 0 -1px;
padding: 1px 3px;
}
.chatimg {
border-radius: 5px 5px 5px 5px;
float: left;
height: 30px;
margin: 5px 10px;
width: 30px;
}
.chatcontent:before {
border-bottom: 7px solid transparent;
border-right: 7px solid #0099CC;
border-top: 7px solid transparent;
content: "";
height: 0;
margin: 1.5px 0 0 -16px;
position: absolute;
width: 0;
}
.chatcontent {
background: none repeat scroll 0 0 #0099CC;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
float: left;
font-size: 14px;
margin: 10px 0 0;
padding: 2px 5px 2px 10px;
max-width: 180px;
}