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:

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

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