Positioning Elements Using CSS

CSS does not need any introduction. It is an ever-loved and over-awed concept right from its conception. After years of practice and millions of websites created, it still can be a nightmare. Again, in the hand of a genius designer CSS can create work of art. So, here in this article I have tried to explain the concept of position of elements in Cascading Style Sheets.

There are three primary types of positioning. An element with ‘static’ positioning is placed where it would normally be in the layout of the document. This is also called the ‘flow positioning’. An element with ‘relative’ positioning is positioned at the offset given by ‘top’, ‘bottom’, ‘left’, and/or ‘right’ from where it would normally occur in the layout. That is, the document is laid out and then elements with relative positioning are offset from their position by the indicated amount. The final type of positioning is ‘absolute’, it means the element is not laid out as a normal part of the document but is positioned at the indicated offset with respect to its parent element.

Position-Related Properties of Style Objects:

CSS Property	Description
position	defines the type of positioning used for an element. Static is default, absolute, relative, fixed, and inherit are other options.
top	defines the position of the object from the top of the enclosing region.
left	defines the position of the object from the left of the enclosing region.
height	defines the height of an element; with positioned items, a measure in pixel (px) is often used though you can give percentage also
width	defines the width of an element
clip	a clipping rectangle like clip: rect( top right bottom left ) is used to define a subset of content; the pixel values of the rectangle are relative to the clipped region not the screen.
visibility	sets whether an element should be visible; possible values are hidden, visible and inherit.
position	defines the type of positioning used for an element. Static is default, absolute, relative, fixed, and inherit are other options.
z-index	defines the stacking order of the object.

Skeleton of a simple CSS based page:

<html>

    <head>
    <style type="text/css">
        div.container{
            width:100%;
            margin:0px;
            border:1px solid blue;
            line-height:150%;
        }
        div.header,div.footer{
            padding:0.5em;
            color:white;
            background-color:blue;
            clear:left;
        }
        h1.header{
            padding:0;
            margin:0;
        }
        div.left{
            float:left;
            width:160px;
            margin:0;
            padding:1em;
        }
        div.content{
            margin-left:190px;
            border-left:1px solid blue;
            padding:1em;
        }
        </style>
    </head>

<body>

<div class="container">
    <div class="header"><h1 class="header">My Domain</h1></div>
    <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
    <div class="content">
    <h2>Free Web Building Tutorials</h2>
    <p>At CodeRewind you will find a remedy for all the difficulties you faced while web designing or software engineering</p>
    <p>We would appreciate your constructive criticism and active participation</p></div>
    <div class="footer">Copyright mydomain </div>
</div>

</body>
</html>

The above sample uses inline CSS, you can also create a separate CSS file and reuse it by including the same file in every page you design.

Search the site