Simple Three Column Layout

1,137 1GB

I will be showing you how to make a very simple but effective three column layout.

First we will begin with the HTML, or structure, of our three column layout.

Expand|Select|Wrap|Line Numbers

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

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link rel="stylesheet" href="style.css" />

  </head>
 
<body>
 
  <div id="left">

  </div>
 
  <div id="middle">

  </div>
 
  <div id="right">

  </div>
 
</body>
 
</html>

Depending upon what you're using each column for there are two ways to position our divisions. We will start with the easier one first.

For this exmaple we are actually going to change our HTML a little. Instead of using ids for our divisions we are going to give them all the same class. So our HTML should look like this.

Expand|Select|Wrap|Line Numbers

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

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link rel="stylesheet" href="style.css" />

  </head>
 
<body>
 
  <div class="column">

  </div>
 
  <div class="column">

  </div>
 
  <div class="column">

  </div>
 
</body>
 
</html>

The reason we're giving each division the same class is so it will be easier to give them all the same style from one rule.

Now we will begin with the CSS, or styles, for our three column layout.

Expand|Select|Wrap|Line Numbers

 .column {

  float:left;

  width:200px;

  height:500px;

  border:1px solid #000;

}

The most important style here is the "float:left;". This is what makes each division sit perfectly against one another. It's really all you need to make a three column layout. The other styles are simply for visual aid. It's very simply but it does cost some customability of each division. This is where our second example comes into play.

Now we switch back to our first code.

Expand|Select|Wrap|Line Numbers

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

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link rel="stylesheet" href="style.css" />

  </head>
 
<body>
 
  <div id="left">

  </div>
 
  <div id="middle">

  </div>
 
  <div id="right">

  </div>
 
</body>
 
</html>

Each division having its own id makes it much easier to add specific styles to that, and only that, division. We're still going to use the same styles for each division and we do have to type a little more code, but it's worth it for customability of each division.

Expand|Select|Wrap|Line Numbers

 #left {

  float:left;

  width:200px;

  height:500px;

  border:1px solid #000;

}
 
#middle {

  float:left;

  width:200px;

  height:500px;

  border:1px solid #000;

}
 
#right {

  float:left;

  width:200px;

  height:500px;

  border:1px solid #000;

}

Now you know two ways to make a three column layout, simply by using the powerful style "float:left;".

Attached Files

	Example 1.zip (621 Bytes, 429 views)
	Example 2.zip (644 Bytes, 375 views)

Apr 22 '08 #1

Subscribe Post Reply

8875

wizardry

201

100+

hello -
with a record set query from php in mysql database how would that layout? wouldnt you need some sort of method or for loop then pass it and increment the variable passed?

if so could you show me an example?

thanks in advance for your help!

Nov 13 '09 #2

Similar topics

Trouble with a three-column layout

by: Martin Gutowski | last post by:

Hi, I'm having trouble with a three-column layout that has a 'banner' across the top of them. I'd like the top to have two graphics, one flush left and one flush right. They would be in those...

HTML / CSS

3 column layout and column height

by: TheMartian | last post by:

Three column layout using nothing but CSS (absolute positioning), renders well in IE, NS, Mozilla, camino, Opera Mac etc The test page is at http://sol4.net/3.shtml as on the above page,...

HTML / CSS

Simple Question (2 column layout)

by: Alfred | last post by:

I essentially have the standard two column layout, but I'm running into a quirk I'm hoping someone can help with. I have one column which is the main content (75%) of the screen and the remaining...

HTML / CSS

Three column forms with CSS

by: dbasch | last post by:

Hello all, I am trying my best to create a three column form using CSS but am having no luck. It looks fine in Firefox but is mangled in IE. Here is my best attempt: <style type="text/css">...

HTML / CSS

Three column help for a beginner!

by: vertigogen | last post by:

Hi I'm trying to design a simple three-column website using html and an external stylesheet. I have a header of 750px wide, navbar underneath is the same width, both centred. Now I want to...

HTML / CSS

Three column layout, middle column clear:both; affects other two columns;no tables

by: Jim Carlock | last post by:

I'm working with three column layouts without tables. The page in question... http://www.microcosmotalk.com/images/garden/vine.asp Using clear:both; causes problems in the left and right...

HTML / CSS

2-column layout and top margin of floated column

by: =?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?= | last post by:

Hello. I seek confirmation for the reasons behind a margin-related behavior I have observed. I have set up a simple test page to illustrate the issue. The page shows a very simple 2-column...

HTML / CSS

problem with IE: display of table in three column layout

by: Reiki Evolution | last post by:

This is the page that I am putting together: http://www.reiki-evolution.co.uk/draft/uk-first-degree-course-dates.htm The site consists of three columns: a sidebar floated left, a sidebar...

HTML / CSS

2 column layout

by: Mark | last post by:

Hi all I would like to create a simple two column layout - navigation on the left and content on the right. I would like the columns to have a fluid width so they can grow and shrink according...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA