Top Align Static Block in HTML and CSS

Description

The following code shows how to top Align Static Block.

Example


<html>
<head>
<style type="text/css" title="text/css">
* .grandContainer {<!--from w  w w . j a  v a 2 s .co  m-->
position: relative;
height: 300px;
width: 700px;
border: 2px solid black;
background: red;
}

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

* .extraStyle {
padding: 5px;
border: 5px solid black;
width: 120px;
text-align: center;
position: relative;
}

* .extraStyle span {
left: 0;
width: 130px;
height: auto;
}

#sizedStaticBlock {
height: 100px;
margin-top: 0;
margin-bottom: auto;
position: static;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div>
</div>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Layout »
      Position

Top Align Static Block in HTML and CSS

Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Center Static Block in HTML and CSS
Left Align Sized Static Block with margin-r...
Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...
Clear after floating element in HTML and CS...
Clear right for above float right element i...
Compare clear both with not clear elements ...
...