Tutorial on positioning divs


The most fundamental task when starting to develop a website is to position the divs.

There are 3 methods in positioning a div:

1)      Positioning by using margin (The green box)



As you can see from the picture above, the green box is displaced from the top left corner, 50 pixels from the top and 50 pixels from the left. Another way of declaring margin is by specifying:

margin:  top(px) right(px) bottom(px) left(px);

The display of the green box is set as inline-block, so while it behaves like a block, it also allows other divs that has been set as relative positioning to be place on the same line as adjacent content.   

2)      Absolute Positioning (the red box)



The red box is positioned by simply declaring how far it has to be away from the top left corner, in this case 50 pixels from the top and 300 pixels from the left.

Absolute positioning will not be affected by the properties of any other divs, as it set to be strictly follows the positioning values given to it.

3)      Relative Positioning (the blue box)



The blue box is positioned by using relative positioning. Absolute positioning takes the normal flow of the neighboring divs into account. It means, without declaring the box to be 300 pixels away from the left, the blue box will be positioned on the right side of the green box, side-by-side, with no gap between them.

The display of the blue box is also declared as inline-block, so it can be placed on the same line with the green box.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s