PickAdvice

This page is misaligned and I couldn’t fix it. Why is this “div” overlapping with the above one ?  Why there is gap between the button and the text box. These are some of the real world scenarios I often encouters. Many times the issue can be fixed easily if one understands the positioning of  html elements using CSS Styles.

A firm understanding of various positioning techniques available in CSS is all you need to elegantly fix the above.

This guide will introduce you to the various positioning techniques with examples and If you have any questions please use the comment section and I will respond to your queries.

Ways in which HTML elements are displayed

Before going into the various positioning methods, it is important  to understand how html elements are naturally laid out by the browser. HTML elements are displayed naturally either as block display or inline display.

Some elements are not at all displayed, like a meta  tag.

A block display (style=”display:block”)  takes up the full width available to it with a new line before and after. By default, the paragraph tags ( p ) and div tags  ( div ) are displayed as block. This is their natural display property.

For instance, the code <p> first paragraph </p> and  <p>  second paragraph </p> are displayed as

first paragraph

second paragraph

Even though there was enough space to display these two paragraph’s in the same line, it was not displayed that way due to the block display characteristics of the <p> tag.

The second paragraph (<p>) can only start on a new line because the first para (<p>) occupies the entire width available to it even when the text inside it less.

Here is  list of common html elements  having block display characteristics.

• <div>
• <h1> … <h6>
• <p>
• <ul>, <ol>, <li>
• <table>
• <blockquote>
• <pre>
• <form>

Inline display elements doesn’t break the flow of the layout.They just fit in with the natural flow of the document. For instance consider the code  <span> first part</span> <span> second part </span>.

This is displayed as first part second part .You can see that this is totally different from the way the <p> tag has behaved. <p>, a block element occupied the entire width of the page where as <span>an in line element, occupied only the space it requires. There is no new line after or before the element.

This concept is graphically explained using the diagrams below.

First image shows that the paragraph tag  occupies the entire width even though the text is so little. You can also observe a new line below and after the first para.

Block element occupies the entire available width and there is a newline above and below the element

Inline elements occupy only the required amount of space and there is no new line before or after the element

Here is  list of common html elements  having inline display characteristics

• <a>
• <abbr>
• <acronym>
• <br>
• <em>
• <img />
• <span>
• <strong>

How to change the default display properties of HTML elements

You can use CSS to change the default display properties of elements. You can change a natural block display to inline and vice-verse.

CSS display attribute can be used to do this. For example style=”display:block”>….. </span> will change the span to a  block display element from its natural inline display.

HTML positioning using CSS

There are three positioning methods available in CSS. These are static, absolute and relative positioning.

Static Position :  This is the natural position of the html element in the document. That’s we haven’t mentioned any explicit position for the element and the element occupies its natural position in the document.

#div-a {

position: static;

}

Above CSS specifies the positioning of   #div-a as static and static positioning is useful if you want to reset an earlier specified positioning method. There is no other benefit in using static positioning.

Relative positioning : Relative positioning refers to moving the element’s left, right, top or bottom position relative to its normal position. In other words, relative position can be used to move the element from its normal (static) position in the document.

Syntax :{position:relative;top: 5px;bottom:10px;left:10px;right:0px;}
For instance, consider the two div elements below.

I am going to use relative positioning to move the green div 5px down and 10px right.

<div style=”position:relative;left:10px;top:5px;”> </div>

Even though the green div has moved its position, its original position before the movement is now an empty space. Relative positioning is excellent in performing adjustments to the layout.

Absolute positioning : When you specify position:absolute, the element is removed its natural position in the document and is placed exactly where you mention.

For instance, when you specify top:50px; and left:50px; for an element, it is positioned exactly at that location on the browser’s screen co-ordinates. All other elements will re-positioned taking into account any empty space left by the newly positioned element.

Absolute positioning is easy to understand as it directly positions the element to the exact location you specify. In practical scenario’s absolute position is combined with relative positioning to create useful HTML layouts and positions.

Relative position + Absolute position = Powerful, flexible layouts

Combining Relative and Absolute positioning

We have seen that relative positioning is used to move an element’s top,bottom, left or right from its natural position in the document and absolute position places the element at the exact location within the browser co-ordinates.

We are now going to combine these two positioning methods to place the absolutely positioned html elements relative to the outer element.

Combining these two positioning can be used to create excellent layouts. When we specify “position: relative ” to the outer div (outer-1) , it means all elements coming inside outer div (outer-1 ) will be positioned relative to the outer div (outer-1).

<div id=”outer-1″ style=”position:relative“>outer div 

   <div id=”inner-1″ style=”position:absolute;top:20px;”> inner div </div> 

</div>

Here outer div (outer-1) is having position:relative and inner div (inner-1) is having absolute positioning. Even though inner-1 is having absolute positioning , it is placed 15px relative to the outer-1 and not according to the absolute screen coordinates.

To put it another way, consider the code snippets and observe how they are rendered differently as illustrated in the image below.

Code a

<div id=”outer-1″ style=”"> outer div 

    <  div id=”inner-1″ style=”position:absolute;top:20px;”>inner div </div>

</div>

Code b

<div id=”outer-1″ style=”position:relative”> outer div 

    <div  id=”inner-1″ style=”position:absolute;top:20px;”> inner div </div>

</div>

Shows the representation of Code a and Code b

Code a uses default natural positioning.

Code b has specified the positioning method of  outer div (“outer-1″ ) as relative

Relative positioning causes the inner div’s absolutely positioned elements to occupy coordinates relative to the outer div. If the outer enclosing element is not having relative position, all absolutely positioned elements are rendered with respect to the screen coordinates. i.e they are placed exactly where you tell it to go. Thus combining relative and absolute positioning we can position the inner html elements relative to the outer element with absolute precision.

If this tutorial is useful to you, please share it with your friends as a token of support for this website.

You may also like these stories:

About prem

Google: +Prem I am a technology enthusiast interested in electronics, internet and computer science. I am passionate about mobile phones, science and advanced technological innovations. I have vast experience in electronics and computer science. Join me on Google+ I dream of a future that relies on clean energy, a future that is pollution free , a future where technology is put to the benefit of the human kind all over the world.

View all post by prem