Tag Archives: html sample code

How to Make div Based Layouts

There has been a lot of debate in the web design community regarding the use of tables and div based layouts. For a long time, web designers have opted to make use of tables in order to arrange content on their websites. There are a lot of advantages that come with using both of them but in this tutorial, we will try to see how you can use div based layouts in order to arrange your web content.

There is a lot of new things that come with div layouts and in the near future, we will see more use of this for responsive websites. As a matter of fact, one thing that sets div elements apart from tables for webpage layouts is the fact that you can have a responsive site made much easier with div layouts that using tables. With div elements, you are in more control over the arrangement of content on a website since each chunk of content inside a div can be rearranged in any manner you wish to. In case you are wondering what we are talking about, responsive web design is a new web design process where the content on a website is arranged automatically in order to scale to the dimensions of the device on which it is being viewed on.

With div layouts, you have more flexibility with css. Let us go right ahead and create a simple site that makes use of div elements for the layout. With a little bit of css, our site will look different across different devices that we access it from. Let us create the general container for our site.

The div based layout that we will build

div based website layout

HTML Part of the Layout

CSS Part of the layout

As you can see, just a little bit of css makes our website display well even on mobile devices. With the site displaying nicely, we will have a great user experience and our users will tend to spend more time on our site and interact more. The content that we place on the site will also be shown nicely and scale automatically in order to fit with the dimensions of the device on which it is being shown.

With the added number of people who are resorting to mobile devices such as smart phones and tablets to browse the internet, the use of responsive web design is becoming more of a requirement than just an option. This comes in very handy when you wish to create one website which will be accessed on different devices. DIV elements are definitely gaining popularity over traditional table based layouts and it is good that you know how to use these in your web projects. Though you can still use css on tables in order to make them responsive, you will be doing a lot of work and forcing the tables to behave like they are not tables. If you want to be safe in the future of web design, using div layouts is most definitely your best bet.

Download the sample template

More Info