problem with divs

Printable View

03-02-2015, 11:31 PM
gib65

problem with divs

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?
03-03-2015, 08:45 AM
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>
03-03-2015, 11:19 AM
coothead

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. :D

coothead
03-03-2015, 05:10 PM
gib65

Quote:

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!