Question

I have the following:

<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
   <div style="position:absolute;left:1px;top:15px;">
            IMAGE GOES HERE
    </div>
    <div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
            messages go here
    </div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
     <div style="position:absolute;right:1px;top:15px;">
       IMAGE HERE
      </div>
      <div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
            messages go here
      </div>
</div>

here is the image of the HTML output:

Please help me getting those divs in vertical order, I don’t want them to float over each other, I want the message div to get the automatic height according to content too.

Answer 1

You should use floats for this. float:left , float:right and a clear:both inbetween :

<div style="width:100%;position:relative;min-height:100%;float:left">
    <div style="float:left">img</div>
    <div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
    <div style="float:right">img</div>
    <div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>

You can see it in action here : jsfiddle