float and div problem

Hi,
I'm trying to understand the basics of float, but I've found an example that leaves me completely at a loss.

Very simple scenario: two divs, one on top of the other:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > 
<head> 
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
 
<title>float test 2</title> 
<style type="text/css"> 
 
div.a { 
 width: 100px; 
 height: 100px; 
 background-color: blue; 
 float: left; 
} 
 
div.b { 
 /* width: 100px; */ 
 /* height: 100px; */ 
 background-color: red; 
} 
 
</style> 
 
</head> 
<body> 
 
<div class="a">Some text in here</div> 
 
<div class="b">Some more text in here</div> 
 
</body> 
</html>

This does what I would expect - the text of div b flows up beside div a and the background color too.

But if I add a width and height to div b, suddenly it stops floating up beside div a AND the background color disappears. This happens on IE and FF.

This code shows the problem:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > 
<head> 
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
 
<title>float test 5</title> 
<style type="text/css"> 
 
div.a { 
 width: 100px; 
 height: 100px; 
 background-color: blue; 
 float: left; 
} 
 
div.b { 
 width: 100px; 
 height: 100px; 
 background-color: red; 
} 
 
</style> 
 
</head> 
<body> 
 
<div class="a">Some text in here</div> 
 
<div class="b">Some more text in here</div> 
 
</body> 
</html>

Does anyone know why?
Thanks!

float and div problem

jake_pa2001

CSS_Kidd

jake_pa2001

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week