2 Column webpages HTML / CSS code

:: "2 column web page HTML/CSS - free copy and paste code using internal and external style sheets ..."

We will now create a standard 2 column HTML / CSS web page. Simply copy and paste the code in the form below. Save as a .html file then open it in your browser - it will look like this: 2 col layout

Actually, we'll deal with two CSS methods here that generate the same layout consisting of a top header 800px, a left column 150px wide and a main content area 650px wide. Fairly standard layout... but very useful. The first method uses an internal style sheet, the second uses an external style sheet.

Internal Style Sheet Example

The first example generates the layout using an internal CSS style sheet. This code is contained in between the :

<style></style> tags

Here's the code using an internal CSS style sheet.

Copy > Paste into a notepad file > Save as something.html to your desktop > Then "open with IE" or what ver browser you wish...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Build Web Site Free | Basic HTML / CSS Template Internal Style Sheet</title>
<META NAME="Description" CONTENT="Build Web Site Free | Basic HTML and CSS Style Sheet example - Internal Style sheet">

<META NAME="Keywords" CONTENT="">
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" /> 
<style>
body {
	text-align:center;
	font-family:verdana;
	font-size:12px;
	padding:0 0 0 0;
	color:#333;
	background:#fff;
	
	}
	
	* {
		margin:0;
		padding:0;
		
}
.clearfix {
	clear:both;

}

div#container{
	width:800px;
	padding:1px;
	margin:0 auto;
	border:1px solid #333;

}
div#top{
	width:800px;
	height:100px;
	padding:0 0 0 0;
	margin:0 auto;
	border:0px solid #333;
		background:#666;

}
div#top h1{
	color:#eee;
	float:left;

}
div#subcontent{
	width:150px;
	float:left;
	padding:0px;
	margin:0 auto;
	background:#ccc;
}
div#main{
	
	width:650px;
	padding:0px;
	margin:0 0 0 0;
	background:#eee;
	float:left;
	}
div#footer{
	width:800px;
	margin:0 auto;
	padding:0 0 0 0;
	background:#eee;
	clear:both;

}

p {
	text-align:left;
	line-height:18px;
	margin:0 10px 0 10px;
}

h1{
	text-align:left;
	margin:0 0 0 10px;
}
</style>

</head>
<body>

<div id="top"> 
	<h1>www.yourwebsite.com</h1>

</div>
	<div id="subcontent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque. In hac habitasse platea dictumst. Nunc tincidunt augue eget ipsum. Aliquam in dui. Mauris vehicula tortor ac massa. Quisque at libero. Nulla facilisi. In semper porta eros. Morbi cursus, elit at placerat cursus, diam ante pharetra lectus, id ultricies sapien justo eget neque. Integer sit amet urna. Proin vestibulum pede et eros. Nullam mollis tellus et ante. Nunc hendrerit magna tincidunt sapien.

</div>
	
	
	<div id="main"> 
	<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque. In hac habitasse platea dictumst. Nunc tincidunt augue eget ipsum. Aliquam in dui. Mauris vehicula tortor ac massa. Quisque at libero. Nulla facilisi. In semper porta eros. Morbi cursus, elit at placerat cursus, diam ante pharetra lectus, id ultricies sapien justo eget neque. Integer sit amet urna. Proin vestibulum pede et eros. Nullam mollis tellus et ante. Nunc hendrerit magna tincidunt sapien.

</p> 
 	<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque. In hac habitasse platea dictumst. Nunc tincidunt augue eget ipsum. Aliquam in dui. Mauris vehicula tortor ac massa. Quisque at libero. Nulla facilisi. In semper porta eros. Morbi cursus, elit at placerat cursus, diam ante pharetra lectus, id ultricies sapien justo eget neque. Integer sit amet urna. Proin vestibulum pede et eros. Nullam mollis tellus et ante. Nunc hendrerit magna tincidunt sapien.

</p> 
 
 
 </div>

<div id="footer">footer</div>

</div>

</body>
</html>

Ok...that works pretty well...the page opened and seems like a useful layout. But wait...

What if our website will potentially contain 500 pages? Updating would be a nightmare!

The CSS code that is embedded into the HTML file with the Internal Style sheet controls the entire layout of the page using CSS from within the single page. It controls all styles such as: text, font size, font color, column width, header width etc...

Now... say you want to make a change in the font size, you feel it's too small and need to increase it a few pixels. With a display being controled by an internal style sheet you'll need to modify the CSS on all 500 pages; that is... make your changes to your CSS tags within the head section of each and every page. Of course that's absurd!

So what do we do to make editing site-wide changes easier? We us an external style sheet.

External Style Sheet Example

We will now place all the CSS code which controls that presentation of our web pages in ONE file. written like this:

<link href="style-basic.css" rel="stylesheet" type="text/css"/>

This file, style-basic.css, will be referenced from every page of our 500 page website. The advantage of this? If we want to increase our font size now we simply edit ONE .css file. Since we include a reference to our external .css file on in every web page all .css presentation changes are site-wide - global.

Enough chitter chatter...let's do it! All you need to do is copy and paste these files below.

First copy and paste this code below into notepad - name it style-basic.css.

NEXT copy and paste this code below into notepad - name it 2-col.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> Basic HTML / CSS Template with  External Style Sheet </title>
<META NAME="Description" CONTENT="Build Web Site Free | Basic HTML / CSS Template with  External Style Sheet ">

</head>
<body>

<div id="top"> 
	<h1>www.yourwebsite.com</h1>

</div>
	
	
	<div id="main"> 
	<h1>Basic 2 Column Layout  with  External Style Sheet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque. In hac habitasse platea dictumst. Nunc tincidunt augue eget ipsum. Aliquam in dui. Mauris vehicula tortor ac massa. Quisque at libero. Nulla facilisi. In semper porta eros. Morbi cursus, elit at placerat cursus, diam ante pharetra lectus, id ultricies sapien justo eget neque. Integer sit amet urna. Proin vestibulum pede et eros. Nullam mollis tellus et ante. Nunc hendrerit magna tincidunt sapien.

</p> 
 
 
 </div>

<div id="footer">footer</div>

</div>

</body>
</html>

Open and view

With your 2 files saved in the same folder you will now open them in a browser. Simply locate the folder on your harddrive - right click on 2-co.html and click open with IE or whicever browser you wish. The file will open as a "web page"

External Style Sheet Is The Way To Go

It should be quite obvious that an external style sheet makes site wide changes a breeze. I would urge anyone interested in web design to have a thorough working knowledge of CSS and external style sheets. New designers are expected to know CSS. The positive impact it has on site layout, site design as well as SEO is tremendous.

If you are interested in learning CSS in a structured way, there are many online resources to get you up to speed on this somewhat confusing technology - Eric Meyer comes to mind, but there are many other great teachers and methods instantly available online.

Review the web building process: build web site free

Was this helpful? Leave a comment...

Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!

Comments...

NAV :: Build web site free :: How To Make Your Own Web Site BUILD A BASIC WEB PAGE :: Easiest HTML Template :: Adding Content to your Web Page :: Display Your Webpage :: Adding Headers and Paragraphs :: Adding Sub Headers :: Adding Links :: Summary - Build a Basic Web Page ASP HOST REGISTRATION :: ASP Domain/Host sign up - step by step ADVICE ABOUT FREE TEMPLATES :: Free HTML Web Page Template Information :: How to create a website for free ADSENSE ADVICE :: Make Money With Adsense :: Picking Niche Keywords for Adsense Websites :: Profitable Keywords for Adsense CREATE ADSENSE TEMPLATE :: Adsense Process - Read First :: STEP 1 - Copy files, name and save :: STEP 2 - Add content :: STEP 3 - Add Navigation Menu :: STEP 4 - Add Links to Menu :: STEP 5 - Add Footer to Webpage :: STEP 6 - Add Adsense Code :: How to Upload Web Files :: View Basic Adsense Template ADDING IMAGES :: Add Banner Image :: Add Regular Image :: View Adsense Template with Images HTML/CSS TEMPLATES :: 2 Column Webpage Layout :: 2 Column Webpage Layout with Nav Menu :: 2 Column WebPage Layout with Nav Menu - .ASP Include File :: Divine Ratio Example - Adsense Layout CSS TIPS :: Setting Up an External Style Sheet :: CSS Rules and selectors :: CSS basic selector style examples :: CSS paragraph Styles :: CSS Contextual Selectors Resources :: Useful websites :: Add URL