I have the following:\[code\]<!-- 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>\[/code\]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.