Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Code For a Basic 2-Column Fluid Webpage Layout

In this article, I provide simple code for a 2-column webpage that does not use a table, but does use some of the latest HTML5 semantic elements. This will be a template with a header using the <header> tag, a footer using the <footer> tag, a main content section using the <main> tag, and an aside section using the <aside> tag.

If you're new to coding HTML (HyperText Markup Language), you may not know that you can create a webpage by simply typing html tags into a text file and saving the file with the .htm extension. Note: do not use a WYSIWYG word processor because these applications insert many of their own formatting tags. Use a basic ASCII text editor like Windows Notepad located in the accessories group.

After you have saved the file, double-click on the file name, assuming the file associations are configured correctly on your computer, the webpage will open in your browser.

One nice thing about this design, besides the fact that it uses minimal html code, is that it creates a fluid layout. With a fluid layout the sections of the webpage grow and shrink, but stay aligned as the size of the users browser window changes.

Here are the steps to code your 2-column fluid webpage layout:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

</head>
<body>

</body>
</html>

1. Type in the basic html tags required to create a webpage. These tags define the two sections of a webpage, the head sction and the body section. The <!DOCTYPE html> tag tells the browser to interpret this code as html5. The <html lang="en"> tag tells the browser that the language is English. The <meta charset="utf-8" /> tag tells the browser what character encoding the webpage uses.

<header>
HEADER
</header>

2. Between the <body> and </body> tags, type in the header tags. The header tags define a section at the top of the page that typically includes the site logo and the site name.

<main>
MAIN<br />
She found herself in a long, low hall, which was lit up by a row of
lamps hanging from the roof. There were doors all around the hall, but
they were all locked; and when Alice had been all the way down one side
and up the other, trying every door, she walked sadly down the middle,
wondering how she was ever to get out again.
</main>

3. Just below the header tags, type in the main tags. The main tags define the main content section of the webpage. In this example I have included some text just to fill the space.

<aside>
ASIDE<br />
She found herself in a long, low hall, which was lit up by a row of
lamps hanging from the roof. There were doors all around the hall, but
they were all locked; and when Alice had been all the way down one side
and up the other, trying every door, she walked sadly down the middle,
wondering how she was ever to get out again.
</aside>

4. Just below the main tags, type in the aside tags. The aside tags define an aside section. An aside section can be used to include content which is a slight departure form the main content, but still related. Again, I have included some text just to fill the space.

<footer>
FOOTER
</footer>  

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268