width:auto stretches a static block : position static « Layout « HTML / CSS

HTML / CSS » Layout » position static 
width:auto stretches a static block
 
<!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>
<title></title>
<style type="text/css">
.section{
  position: fix;
  width: 600px;
  height: 600px;
  background: gray;
}
* .centered {
  width: 380px;
  background: red;
}

* .static {
  position: static;
  background: blue;
  width: auto;
}

* .absolute {
  position: absolute;
  top: 20px;
  left: 215px;
  background: yellow
}

* .fixed {
  position: fixed;
  bottom: 20px;
  right: 5px;
  background: gold;
}

* .relative {
  position: relative;
  top: 20px;
  left: 30px;
  background: black;
}

* .float {
  float: right;
  background:pink;
}
</style>
</head>
<body>

<div class="section">
  <p class="static centered" 
    <span class="static centered">Static</span> 
    <span class="absolute">Absolute</span> 
    <span class="fixed">Fixed</span> 
    <span class="relative">Relative</span> 
    <span class="float">Float</span> 
    <span class="relative float">Relative Float</span>
  </p>
</div> 

</body>
</html


  

 
Related examples in the same category
1.static position and relative position
2.Using Static Positioning
3.setting width to a value, margin-left to auto, and margin-right to auto centers a static block
4.Static Positioned
5.use position:static to unposition an element so that it is rendered normally in the flow.
6.Stacking Context
7.Elements flow automatically one after the other in lines and blocks
8.Stretched Absolute
9.Sized Static Block left offset
10.Stretched Static Block left offset
11.Sized Static Block centered aligned
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.