Clearing Floats : float layout « Layout « HTML / CSS

Clearing Floats

 



<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p,h1,h2 {
  margin-bottom: 1em;
}

#left {
  width: 200px;
  background: #aaa;
  height: 600px;
  border: 1px solid red;
  float: left;
  text-align: center;
}

#centre {
  margin-left: 220px;
  padding-right: 50px;
}

img {
  float: left;
  padding: 10px
}

h2 {
  clear: both;
  border: 1px solid red;
  line-height: 30px;
  background: #ccc;
}
</style>
</head>
<body>
<div id="left"> 
  <p>Left Floated Column</p>
</div>

<div id="centre"> 
  <h1>This is the header</h1>
  <h2>this is a test. this is a test. this is a test. </h2>
  <p>this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>

</html>

Related examples in the same category

1.	You can float any element using float:left or float:right.
2.	A float element is removed from the normal flow.
3.	Left floats indent adjacent content to the right,
4.	right floats indent content to the left.
5.	float left and margin left 34%
6.	floats and percentage width
7.	CSS: Left and right on the same line
8.	When a float cannot fit next to another float, it moves down below it.
9.	width sets the width of the float element.
10.	height sets the height of the float.
11.	height:auto is the default value and shrinkwraps the float to the height of all its child blocks or lines.
12.	A positive margin pushes the float element away from its point of alignment
13.	A positive margin pushes other floats and inline content away from it.
14.	A negative margin pulls the float element to the other side of its point of alignment
15.	A negative margin pulls other float elements and inline content closer.
16.	Use width:auto, left:0, and right:0 to stretch an absolute element to the left and right sides of its closest positioned ancestor.
17.	Use height:auto, top:0, and bottom:0 to stretch an absolute element to the top and bottom of its closest positioned ancestor.
18.	Float Right - cleared right
19.	Float Right - NOT cleared
20.	Float and clear
21.	Float from left one by one
22.	Tag sequence and floating
23.	Fluid Layout with float
24.	If the floating left block is too high