CODEWITHSUNDEEP
htmlcss
boody
boody

Reputation: 17

make css3 divs float to top

I'm trying to make a chat application where each new message creates a new div that is inserted at the bottom of a container, thus bumping the preceding message(s) toward the top of the container. I can get the messages to be added to the container but can't get the positioning to work correctly.

HTML (example):

 <div id='chat_container'>
   <div class='message'>Message 1</div>
   <div class='message'>Message 2</div>
 </div>

CSS:

 #chat_container{
                    position: relative;
                    height: 240px;
                }


 .message{
            position: absolute;
            bottom: 0;
         }

If I use the above styling, every subsequent .message div box will be inserted into the same place as the previous messages, thus hiding them. I want to bump message 1 toward the top of the page without having to rely on javascript to update style properties.

Upvotes: 0

Views: 71

Answers (2)

Devin
Devin

Reputation: 7720

Almighty FLEX coming to the rescue!

#chat_container {
    display:flex;
    flex-direction:column-reverse
}
.message {
    display:block;
    width:100%;
    margin:20px auto;
    border:1px solid #000;
}

See fiddle

Some conceptualization

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.

from Mozilla MDN "Using CSS flexible boxes"

Upvotes: 1

Lương Phạm Th&#225;i Huy
Lương Phạm Th&#225;i Huy

Reputation: 1

Have a solution for your question:

<div id='chat_container'>
  <div id='wrapper'>
    <div class='message'>Message 1</div>
    <div class='message'>Message 2</div>
  </div>
</div>

CSS:

#chat_container{
    height: 240px;
    display: table;
}
.wrapper{
    display: table-cell;
    vertical-align: bottom;
}
.message{
    position: relative;
}

Upvotes: 0

Related Questions