how to arrange div containers among each other without using float

October 12, 2022

i have the below structure on my website and there are alternating float:left and float:right assigned to these div containers. But now I want all these divs not to appear side by side (as they do right now) but one below the other

html

<div class="chat">
   <div class="chat-message a">...</div>
   <div class="chat-message b">...</div>
   <div class="chat-message a">...</div>
   <div class="chat-message b">...</div>
</div>

css

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
}

.a{
    float: left;
    background-color: #79d2a1;
}

.b{
    float: right;
    background-color: #7eaacd;
}

>Solution :

Add clear: both; to the chat-message class, as follows:

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
    clear: both;
}

.a{
    float: left;
    background-color: #79d2a1;
}

.b{
    float: right;
    background-color: #7eaacd;
}

<div class="chat">
   <div class="chat-message a">...</div>
   <div class="chat-message b">...</div>
   <div class="chat-message a">...</div>
   <div class="chat-message b">...</div>
</div>