Category Archives: Beginner

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

How to Write an HTML Redirect

The web is a very dynamic place. In some cases, you may need to change things around a bit in order to have a better structure in your website or to add some other things. This may need you to change the location of web pages from their original locations. In this case, you do not want the user to get lost inside your website when they try to visit pages that they had been to previously and even probably bookmarked.

For instance, you may move your files from one folder to another within the same site structure when you want to expand your site. If a signup page was originally on example.net/signup.html and you moved things around on your side and now the page is on example.net/secure/signup.html, you will need to redirect the user appropriately so that they do not get lost even when they visit the previous page.

Now, in order to accomplish this, we can make use of the Meta Refresh tag in HTML. Meta refresh is a way in which you can tell the web browser to go to a different page.

Sample HTML Redirect Code:

It is important to note that this only works for single web pages in scenarios such as this one where we have moved a couple of pages and not for shifting an entire website.