Float right in a relative positioned 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
  border: 1px dotted #BAB9B8;
  width: 800px;
  overflow: hidden;
  margin-bottom: 20px;
}

.box {
  background: #FFFCC4;
  border: 1px dotted #BAB9B8;
  width: 200px;
  height: 100px;
  margin: 20px;
  position: relative;
}
.floatRight {
  float: right;
}
.text {
  position: absolute;
  left: 0;
  top: 0;
}

</style>
</head>

<body>


<div class="container">
<div class="floatRight box"><em class="text">Box 1</em></div>
<div class="box"><em class="text">Box 2</em></div>
<div class="box"><em class="text">Box 3</em></div>
</div>

</body>
</html>

Related examples in the same category

1.	Float left in a relative positioned container
2.	everything floated
3.	Nested floating container
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

Float right in a relative positioned container : Container Layout « Layout « HTML / CSS

Related examples in the same category