Log in

View Full Version : problem with divs


gib65
03-02-2015, 11:31 PM
Please have a look at the following html:


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


coothead
gib65
03-03-2015, 05:10 PM
You've missed a colon in the first/left div inline style;
<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!