how to make the div that has auto width not pick up 100% of the parent div

Navigation
2

I'm doing a mini chat, I'm having a problem when styling user conversations, my goal is to make the div that will show the conversations not bigger than your content, that is, if the user just typed a word, it is the size of that word, I'm having problem with that, I have the div parent that is called box_mensagem and within that div I have li that will hold the conversations of the users, and inside of these li I have the div box_msg that gets 100% of the div that is the box_mensagem and within that box_msg I finally have the div that holds all my talk is the segura_msg div by default it has a float: left; and to identify when I am sending the message I added the class eu with a float: right; , and that div has a width: 400px; that limits the size of it, and inside it I have the div that shows the photo and the message of the user with the width: auto; , only that I am in problems in this, my message was to stay in the right, and the photo f sometimes of this div with width: auto; but when I do a negative margin in the photo, it ends up disappearing from div , what am I doing wrong? link 

<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>
    
asked by anonymous 15.04.2018 / 02:56

1 answer

2

I suggest that you change some CSS code, such as creating another class for incoming messages. Your messages have classes .eu and .m_msg , so you can create two other .ele and .e_msg classes. This way it is much easier to style each thing independently, such as assigning a different%%, a different margin and positioning the image of each float .

The image you can position absolutely ( div ) since its position will always be the same.

See how it would look like this: 

.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;
}
.box_mensagem ul li .box_msg .segura_msg {
    float: left;
    width: 400px;
    height: 100%;
    background-color: pink;
}

.box_mensagem ul li .box_msg .eu
{
    float: right;
    text-align: right;
}

.mostra_msg {
    float:  left;
    width: auto;
    height: auto;
    background-color: #ccc;
    position: relative;
}

.mostra_msg img {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 0;
}

div.m_msg{
    margin-right: 55px;
    float: right;
}

div.e_msg{
    margin-left: 55px;
}

.eu .mostra_msg img{
   right: -55px;
}

.ele .mostra_msg img{
   left: -55px;
}
<div class="box_mensagem align_left">
    <ul>
        <li><div class="box_msg">
            <div class="segura_msg ele">
                <div class="mostra_msg e_msg">
                    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"border="0">
                    aqui vem a primeira conversa do chat aqui vem a primeira conversa do chat aqui vem a primeira conversa do chat 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="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"border="0">
                    aqui vem a primeira conversa do chat aqui vem a primeira conversa
                </div>
            </div>
        </div></li>
    </ul>
</div>
    
15.04.2018 / 05:10
Dropdown and Autocomplete Interactive HTML and PHP form