Sized Absolute center aligned : Size and Layout « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. Size and Layout

Sized Absolute center aligned

  


<!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;
  background: red;
}

* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}

* .example {
  padding: 5px;
  border: 5px solid black;
}

#myAbsolute {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 155px;
  width: 67%;
  left: 0;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <span id="myAbsolute" class="example">Sized Absolute</span> 
    </div>
  </div> 
</body>
</html>








Related examples in the same category

1.width and height inline style
2.width height and absolute positioning
3.Stretched Absolute center aligned
4.Sized Absolute center offset
5.Stretched Absolute centered
6.Top Aligned Shrinkwrapped Static Block
7.Shrinkwrapped Absolute Top Aligned
8.Sized Static Block top offset
9.Response layout with avatar image
10.About page layout
11.About page layout 2
12.Daliy post layout
13.Quotation layout
14.Day by day post layout
15.Fixed Box Layout
16.Using Fixed height and width to create layout
17.Layout input controls with css
18.Using table to layout form controls
19.Form Layout with HTML Example
20.Site map layout
21.Poem layout
22.Nested style layout
23.Liquid Layout
24.Fixed Width Layout
25.Column span for four column layout
26.How tables linearize for layouts
27.Centering a layout horizontally
28.Creating a maximum-width layout
29.Nested Layout Example
30.Gallery layout
31.Link navigation layout
32.Link topic layout
33.Post layout
34.Three link layout
35.Center content layout
36.Card layout page
37.Even column layout
38.Box layout
39.Two column layout, 1024 pixel width
40.Content area layout
41.Code layout
42.Page layout with position:absolute;
43.Two-column layout with fixed width and height
44.Using margin to create offset for layout
45.Layout with three layers
46.position:fixed; layout
47.Layout with position:absolute;