CODEWITHSUNDEEP
htmlcss
Dedi Ananto
Dedi Ananto

Reputation: 143

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 <code>enter image description here</code>

bubble left and right in a row. and what i want is like this pictenter image description here

this is my sample code 

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

Upvotes: 0

Views: 317

Answers (4)

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

Add this to the css 

div { clear:both;  }

Upvotes: 1

Hitesh Aghara
Hitesh Aghara

Reputation: 186

<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>

Upvotes: 1

ristapk
ristapk

Reputation: 1372

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>

Upvotes: 2

Head In Cloud
Head In Cloud

Reputation: 2051

Try this it should work 

div {clear: both;}

Upvotes: 1

Related Questions