Home » Uncategorized » CSS Positioning: How it Helps in Creating Web Layouts?

CSS Positioning: How it Helps in Creating Web Layouts?

Reading Time: 2 minutes

A large number of people prefer to use tables for layout as they find it difficult to do layout with CSS. However, the fact is doing layout with CSS is surprisingly easy. This can be done in two ways, either through CSS positioning or CSS floats. Here, the focus will be on the use of CSS positioning for creating web layouts.
Why CSS Positioning?

The main reason why CSS positioning is considered to be the best solution is that it is compatible with all the latest browsers. However, if someone is using Internet Explorer 4 or Netscape 4, then it may be difficult for him to browse through a CSS positioned web page.

Getting Started

A tabular format is required for building a website with tables. To put it in simple terms, you have to see your page in the form of rows, columns and cells as this is what going to be reflected. However, if you choose CSS positioning design, you can simply visualize your website pages in the form of content. Why? You can place content anywhere in the page layout, even overriding the existing one.


For clarity, you can pick a simple content page of your choice and try to identify its different parts, such as header, right column, the text, the footer and so on. You can arrange these elements and define the various sections of the content with the help of DIV tags. After this is done, you can apply CSS positioning to arrange all the identified elements on the page.

Finding out Content Sections
After the content portions of your page are defined, you have to create an HTML code for them.  Though you can arrange your content parts in any random order of your choice, but it is suggested that vital portions should be placed first in the page. It is important from SEO perspective as well.


If you are working on a three column layout, then there will be three sections to be incorporated. These include content, right navigation and left navigation. You need to define these elements with DIV tags along with a unique name for all the IDs. For instance:

<div id=”content”> </div>
<div id=”rightnavigation”> </div>
<div id=”leftnavigation”> </div>

Content Positioning
You can define the position of your DIV tags with unique ids using CSS. For this, you have to specify the position like this:

#content {
}

The information stored in the DIV tag can occupy the space even up to 100% of the width of the location or the page in concern. If you want you can modify the margin elements or padding to determine the location of a section without restricting it to any fixed width. Once you are done with positioning the sections using the above mentioned style, you will be able to see the layout of your page without any table tags.

(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our PSD to CSS experts now if you need professional help in your web strategy.)

Varun Bhagat is a technology geek and works in PixelCrayons as a Sr. Technology Consultant. He possesses in-depth knowledge of different web development technology and helps our clients to choose the best technology as per their needs.

Are you ready to turn your idea into reality? Contact Us Now