Left Aligned Sized Static Block with margin-right: auto : margin right « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. margin right

Left Aligned Sized Static Block with margin-right: auto

  

<!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;
}

#sizedStaticBlock {
  position: static;
  text-align: left;
  margin-top: 5px;
  width: 400px;
  margin-left: 0;
  margin-right: auto;
}

</style>
</head>
<body>

<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
      <div id="sizedStaticBlock" class="common">Sized Static Block </div> 
  </div>
</div> 

</body>
</html>








Related examples in the same category

1.'margin-right' Example
2.margin-right: auto
3.margin-right: 15%
4.margin-right: 4px;
5.Set margin for four directions
6.Set margin left and right to auto
7.Centered body
8.Left Aligned and Offset Static Block
9.Center Aligned static
10.Right Aligned static
11.Center-middle Aligned
12.Right-top Aligned and Offset
13.Aligned center horizontally for absolute position
14.Aligned center vertically for absolute position
15.Sized Static Block right aligned
16.Stretched Static Block right aligned
17.Sized Absolute right aligned
18.Sized Relative block
19.Stretched Absolute right offset