Elements flow automatically one after the other in lines and blocks : position static : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » position static »

 

Elements flow automatically one after the other in lines and blocks


 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" media="Screen">
span {
  position: static;
  margin: 40px;
  line-height: 32px;
  padding: 3px;
  border: 2px solid black;
  background-color: yellow;
}

#sizedStaticBlock {
  position: static;
  width: 120px;
  height: 100px;
  margin: 10px auto;
  background: red;
  
}

#myStyle {
  position: static;
  width: auto;
  height: auto;
  margin: 10px 50px;
  background: blue;
}
.parent{
   width: 600px;
   height: 600px;
   background: gold;
}
</style>
</head>
<body>
  <div class="parent">Non-positioned Parent 
    <div id="sizedStaticBlock" class="box">Sized Static Block </div> 
    <div id="myStyle" class="box">Stretched Static Block</div> 
    <div class="box"> <span>Shrinkwrapped Static Inline</span> 
    <span>Shrinkwrapped Static Inline</span> 
    </div>
  </div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» position static