Shrinkwrapped Relative : Box Layout « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Box Layout

Shrinkwrapped Relative

 

<!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></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}

* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}
* .common {
  padding: 5px;
  border: 5px solid black;
  background-color: gold;
}

#myStatic {
  position: static;
  text-align: left;
  margin-top: 5px;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  background: yellow;
}

#wa {
  position: relative;
  text-align: left;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: 0;
  right: auto;
  margin-right: auto;
  background: red;
}

</style>
</head>
<body>

<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
      <div id="myStatic" class="common">Stretched Static Block
        <span id="wa" class="common">Shrinkwrapped Relative</span> 
      </div>
  </div>
</div> 

</body>
</html>








Related examples in the same category

1.Horizontally Stretched Static
2.Vertically Stretched Absolute
3.Horizontally Stretched Absolute
4.Indent the left and right sides of a static element
5.Move right and left with margin
6.Indent up and down with margin
7.Parent position: absolute, child position fixed or absolute
8.Parent position: relative, child position fixed or absolute
9.Parent position: absolute, child position: relative or static
10.Offset Absolute and Offset Fixed
11.Sized Block Outside to the Left of its parent
12.Sized Block Outside to the Right of its parent
13.Sized Float Outside Left to its parent
14.Sized Float Outside to the Right of its parent
15.Positioned parent and non-position child
16.Sized Absolute
17.Sized relative
18.Shrinkwrapped Absolute
19.Static container and absolute child to top and left
20.Static postioned container and absolute child to the top and right
21.Static positioned container with child to the bottom and left
22.Static positioned container with child to the bottom and right
23.Relative positioned container with absolute positioned child to the top and left
24.Relative positioned container with absolute positioned child to the top and right
25.Relative positioned container with absolute positioned child to the bottom and left
26.Relative positioned container with absolute positioned child to the bottom and right