Create a Site with HTML


How to Create Columns on Your Web Page TRY This SiteBuilder FREE! - No Credit Card

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:
<div>
<div></div>
<div></div>
</div>

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.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.


We'll name them using the ID attribute as shown below:
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>

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.
<html>
<head></head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
 </body>
</html>

*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.

Take a short quiz on the information you just learned.

In the next lesson we'll learn about CSS style sheets and add some color to the web page.

Let's learn some CSS