The proper way to divide a web page or a horizontal section of a web page into columns is using the division tag.
The method we present here will work in all browsers.
We will create 2 columns and center those columns on the web page.
We’ll actually use 3 sets of division tags or 3 divisions to create our 2 columns. The third division is used for centering the 2 columns in the browser window.
The basic code looks like this:
Notice that we have 3 sets of division tags and 2 of the divisions are nested within a third division.
Next we’ll give names to each division so that when we add our style sheet in the next lesson we’ll be able to format our columns and center them.
We’ll name them using the ID attribute as shown below:
Notice from the code that we have two divisions named left and right nested within a third division named main.
Open firstpage.html in your text editor.
Copy the code for the divisions and paste it in between the open and close body tags.
*Doctype excluded for clarity
Note: Try to make the code you build in NotePad look like our examples. You can create space between tags by placing your cursor at the end of a tag and pressing the Enter Key.
There you have the beginning of your 2 column web page.
Save the changes. If you looked at the page with your browser, you should still see just a blank web page.
There are of course some attributes which we’ll add to the tags using style sheets as problems arise. If we add them as we go it will be easier to see what they do.