estou fazendo um mini chat, estou tendo problema quando a estilização das conversas dos usuários, meu objetivo é fazer com que a div
que irá mostrar as conversas não fique maior que o seu conteúdo, ou seja se o usuário só digitou uma palavra, ela fica do tamanho dessa palavra, estou tendo problema quanto a isso, tenho a div
pai que se chama box_mensagem
e dentro dessa div
tenho as li
que vão segurar as conversas dos usuários, e dentro dessas li
tenho a div box_msg
que pega 100%
da div
que é a box_mensagem
e dentro dessa box_msg
enfim tenho a div
que segura toda a minha conversa é a div segura_msg
por padrão ela tem um float: left;
e para identificar quando é eu que mando a mensagem adicionei a classe eu
com um float: right;
, e essa div
tem um width: 400px;
que limita o tamando dela, e dentro dela tenho a div que mostra a foto e a mensagem do usuário com o width: auto;
, só que estou com problemas quanto a isso, a minha mensagem era para ficar na direita, e a foto fora dessa div
com width: auto;
porém quando eu do uma margin negativa na foto, ela acaba sumindo da div
, oque estou fazendo de errado ?
http://prntscr.com/j5dvm8
<style type="text/css">
.align_left {
float: left;
}
.box_mensagem {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.box_mensagem::-webkit-scrollbar {
width: 0px;
}
.box_mensagem ul li .box_msg {
margin: 0 0 0.5em 0;
width: 570px;
height: 120px;
background-color: purple;
}
.box_mensagem ul li:last-child .box_msg {
margin: 0;
}
#chat #left #mensagem .box_mensagem ul li .box_msg .segura_msg {
float: left;
width: 400px;
height: 100%;
background-color: pink;
}
.box_mensagem ul li .box_msg .eu,
.box_mensagem ul li .box_msg .segura_msg .m_msg {
float: right;
}
.box_mensagem ul li .box_msg .segura_msg .mostra_msg {
float: left;
width: auto;
height: auto;
background-color: #ccc;
}
.box_mensagem ul li .box_msg .segura_msg img {
float: left;
width: 55px;
height: 55px;
}
</style>
<div class="box_mensagem align_left">
<ul>
<li><div class="box_msg">
<div class="segura_msg">
<div class="mostra_msg">
<img src="fotos/1.jpg" border="0">
aqui vem a primeira conversa do chat
</div>
</div>
</div></li>
<li><div class="box_msg">
<div class="segura_msg eu">
<div class="mostra_msg m_msg">
<img src="fotos/2.jpg" border="0">
aqui vem o usuário 02
</div>
</div>
</div></li>
</ul>
</div>
id
s#
mas o HTML mostrado não tem 1 elemento com uma dessasid
s.float: right
entendeu ? adiv m_msg
quer dizer minha mensagem, eu dei umfloat: right
nela só que não pegou