Simple Html/css Buble Chat

i want make simple buble chat using css. with basic css (not CSS3) because the chat run on IE and loaded by VB program. i use float left and right, but i got issue like this pict

Solution 1:

Try this code with clearfix:

<divstyle="width:600px;"><divstyle="width:100%;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius</span><divstyle="clear: both"></div></div><divstyle="width:100%;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span><divstyle="clear: both"></div></div><divstyle="width:100%;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span><divstyle="clear: both"></div></div><divstyle="width:100%;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span><divstyle="clear: both"></div></div><divstyle="width:100%;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The </span><divstyle="clear: both"></div></div><divstyle="width:100%;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius elements.</span><divstyle="clear: both"></div></div></div>

Solution 2:

Add this to the css

div { clear:both;  }

Solution 3:

Try this it should work

div {clear: both;}

Solution 4:

<divstyle="width:600px;"><divstyle="display: block; width: 100%; float: left;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius</span></div><divstyle="display: block; width: 100%; float: right;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span></div><divstyle="display: block; width: 100%; float: right;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span></div><divstyle="display: block; width: 100%; float: left;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span></div><divstyle="display: block; width: 100%; float: right;"><spanstyle="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The </span></div><divstyle="display: block; width: 100%; float: left;"><spanstyle="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius elements.</span></div>