Nested floating container : Container Layout « Layout « HTML / CSS

Nested floating container

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>immediate parent container only floated</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
  border: 5px solid purple;
}

#parent2 {
  border: 5px solid blue;
  padding: 10px;
  float: left;
}

.floatleft {
  border: 5px solid red;
  float: left;
  width: 200px;
  background: white;
}

.floatright {
  border: 5px solid green;
  float: right;
  width: 200px;
  background: white;
}
</style>
</head>

<body>
<div id="parent1">
 <p>This is the first parent container</p>
 <div id="parent2">
 <p>This is the second parent container</p>
  <p class="floatleft">This is floated content.</p>
  <p class="floatright">This is floated content.</p>
 </div>
</div>
</body>
</html>

Related examples in the same category

1.	Float right in a relative positioned container
2.	Float left in a relative positioned container
3.	everything floated
4.	float: right in a container
5.	Absolute container and absolute children
6.	relative position and absolute descendant
7.	Absolute container and absolute child with offset to left and right
8.	Descendant elements must always have a z-index higher than that of their parent.
9.	By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.
10.	Smaller container but larger children
11.	Stretched Absolute Top Aligned