problem with divs

**gib65** · 03-02-2015, 11:31 PM

Please have a look at the following html:

Code:

<html>
<head>
</head>
<body style="width: 100%;">
<table style="width: 100%;" border=1><tr><td>
<div style="width 50%; background-color: red; float: left;">left</div><div style="width: 50%; background-color: blue; float: left;">right</div>
</td></tr></table>
</body>
</html>

When I run this, I get a red div with the word "left" in it that's only about an inch long, and I get the blue div right after it at about 50% of the page.

Why is the red div not 50% of the page?

**Beverleyh** · 03-03-2015, 08:45 AM

You've missed a colon in the first/left div inline style;

Code:

<html>
 <head>
 </head>
 <body style="width: 100%;">
 <table style="width: 100%;" border=1><tr><td>
 <div style="width: 50%; background-color: red; float: left;">left</div><div style="width: 50%; background-color: blue; float: left;">right</div>
 </td></tr></table>
 </body>
 </html>

**coothead** · 03-03-2015, 11:19 AM

Hi there gib65,

also note that, further to what Beverleyh has just pointed out, the parent element of an element which
has a percentage dimension value, in this case it is the td element, must always have a width value set.

Fifty percent of nothing is nothing.

coothead

**gib65** · 03-03-2015, 05:10 PM

Originally Posted by Beverleyh

You've missed a colon in the first/left div inline style;

Code:

<html>
 <head>
 </head>
 <body style="width: 100%;">
 <table style="width: 100%;" border=1><tr><td>
 <div style="width: 50%; background-color: red; float: left;">left</div><div style="width: 50%; background-color: blue; float: left;">right</div>
 </td></tr></table>
 </body>
 </html>

D'Oh!