In the first part of this series on how to build a web site, you learned how to: Develop a purpose for your site; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML and JavaScript.
In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of an HTML file; Wrote your first HTML code; and Started your CSS file.
The third article described how to: Add additional styles to the CSS and How links work and how to style them. Now, you’ll learn how to create a page layout in the CSS.
If you’re tempted to create your page layout with tables, stop right there, pack up your bags and go home. Tables went out of style nearly 10 years ago. Currently, most web developers use containers and <div> tags to determine the page layout. That might not be true with HTML 5, but that time is not here yet. For the purposes of this article, you will learn how to create a three-column page design with a header and footer.
Start by opening the .htm file you started and within the <head> tags, type:
<style type=”text/css”>
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
What you
’
ve just done is essentially zero out any pre-existing default margins. Now you
’
re free to create your own margins.
Side note: after your site is up and running, and you’ve started using an analytics tool to gather information about your visitors, you can learn the size and resolution of your visitor’s screen. At that time, you might want to adjust your margins to reflect the most popular screen sizes, or change it so it resolves to any resolution. For the purpose of this article, you will learn how to create a page layout to suite a screen resolution of 1280 x 800, which should also work just fine for screen resolutions of 1280 x 1084.
In your CSS file, create the container:
#container {
width: 1000px;
margin: 0 auto;
padding: 0;
}
This creates a container that is essentially 1000 pixels wide with no margins and no padding. This will fit very nicely on a screen resolution of 1280 x 800.
Side note: Adding this code to your CSS file now advances you beyond basic HTML, which means you now need to update your doctype declaration in the .htm file to:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
You
’
ll notice this declaration is essentially the same as the previous one, but it now allows for XHTML, which is Extensible Hyper Text Markup Language.
The third line of the above code (margin: 0 auto;) contains the XHTML. This code creates a margin of zero. The auto, allows the browser to help determine the best margins for a visitor’s browser, and centers the container on the screen. Otherwise, all of your content would be left-aligned, leaving a large amount of space on the right-hand side of the screen. This provides an aesthetically pleasing appearance for your site.
Now, let’s create your header row. In your CSS file, type:
#container #header {
margin: 0;
padding: 0;
width: 100%;
height: 100px;
float: left;
border-bottom: #adde63 solid 1px;
}
You
’
ve now created a header with a height of 100 pixels. Adding a border to the code now will help you see where this container ends. You can always remove it later.
Most likely, you’ll want your navigation bar underneath the header. Type the following into your CSS file to create a holder for your menu:
#container #navbar {
margin: 0;
padding: 0;
width: 100%;
height: 40px;
float: left;vertical-align;
border-bottom: #adde63 solid 1px;
}
Using a border in the CSS is a better alternative to using a hard rule in the HTML. It provides greater flexibility and is easier to update pages later. You can define the color of the border by using hex numbers. The thickness of the border is defined by pixel. Many designers would advise against using too many borders on a site as they create clutter. Instead, utilize good white space technique to help keep your content organized and easy to find.
Next, it’s time to add in your columns. You need to create columns that are divisible by two, which means you can’t simply create three columns. First, you need to create two columns and then split the second column in two. It might sound like a lot of work, but it’s really not.
In your CSS file, type:
#container #col1 {
width: 280px;
float: left;
}
#container #col2outer {
width: 700px;
float: right;
margin: 0;
padding: 0;
}
#col2outer #col2mid {
width: 400px;
float: left;
}
#col2outer #col2side {
width: 280px;
float: right;
}
The width is no longer defined by 100%, which means the width equals the same width as defined in the main container, which in this case is 1000 pixels. Instead, the column widths now have a static value. You can change these values as you see fit. As it
’
s set up now, the value for the first column is 280 pixels. The total value for the middle and right column is 700 pixels, which is then split to 400 pixels for the middle column and 280 pixels for the right column.
Generally, the middle column in most web sites is slightly larger than the two side columns.
If you do some simple addition, you might notice that the total widths of all the columns do not add up to 1000 (280 + 400 + 280 = 960). You might be wondering where the other 40 pixels have gone. Those 40 pixels make up the spacing, or padding, between the columns. This provides the sought after white space that prevents the text from each column from running into each other.
Look at the number of pixels for the middle and right column, which is 700. The middle column is assigned a width of 400 pixels and the right column is 280 pixels, which is a total of 660 pixels. This provides 20 pixels of space between the two columns.
Last, add in the footer:
#container #footer {
float: left;
width: 100%;
border-top: #adde63 solid 1px;
}
You
’
ll notice the footer has the border at the top as opposed to the bottom. You can place the border wherever you feel best.
In the next article, you’ll learn how to update the .htm to make use of your CSS.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
