float: right in a container : Container Layout « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. Container Layout

float: right in a 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>Float problem explained</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent {
  border: 5px solid blue;
  padding: 10px;
  height: 1%;
}

.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="parent">
<p>This is the parent container</p>
 <p class="floatleft">This is floated content.</p>
 <p class="floatright">This is floated content.</p>
</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.Nested floating 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