Simple float clearing in Mozilla : Box model Basics : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » Box model Basics »

Simple float clearing in Mozilla


 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer,#outer2 {
  width: 500px;
  background: #ccc;
  border: 1px solid #000;
}

.inner,.inner2 {
  width: 300px;
  background: #aaa;
  border: 5px solid blue;
  padding: 5px 0;
  overflow: hidden;
  margin: 5px;
}

img {
  float: left;
  margin: 5px;
  border: 1px solid #000
}


</style>
</head>
<body>
<div id="outer"> 
  <div class="inner"> <img src="http://www.navioo.com/style/logo.png" width="100" height="67" /> 
    <p>Some descriptive text</p>
  </div>
</div>

</body>

</html>