Sized Static Block centered aligned : position static « Layout « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Layout » position static 




Sized Static Block centered 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;
}

#sizedStaticBlock {
  position: static;
  text-align: center;
  margin-top: 5px;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <div id="sizedStaticBlock" class="example">Sized Static Block </div> 
    </div>
  </div> 
</body>
</html>

 














Related examples in the same category
1.static position and relative position
2.Using Static Positioning
3.width:auto stretches a static block
4.setting width to a value, margin-left to auto, and margin-right to auto centers a static block
5.Static Positioned
6.use position:static to unposition an element so that it is rendered normally in the flow.
7.Stacking Context
8.Elements flow automatically one after the other in lines and blocks
9.Stretched Absolute
10.Sized Static Block left offset
11.Stretched Static Block left offset
12.Stretched Static Block center aligned
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.