467,868 Members | 1,295 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Simple Three Column Layout

Death Slaught
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 
  2.  
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5.  
  6.  
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  10.     <link rel="stylesheet" href="style.css" />
  11.   </head>
  12.  
  13. <body>
  14.  
  15.   <div id="left">
  16.   </div>
  17.  
  18.   <div id="middle">
  19.   </div>
  20.  
  21.   <div id="right">
  22.   </div>
  23.  
  24. </body>
  25.  
  26. </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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 
  2.  
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5.  
  6.  
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  10.     <link rel="stylesheet" href="style.css" />
  11.   </head>
  12.  
  13. <body>
  14.  
  15.   <div class="column">
  16.   </div>
  17.  
  18.   <div class="column">
  19.   </div>
  20.  
  21.   <div class="column">
  22.   </div>
  23.  
  24. </body>
  25.  
  26. </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
  1. .column {
  2.   float:left;
  3.   width:200px;
  4.   height:500px;
  5.   border:1px solid #000;
  6. }
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 
  2.  
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5.  
  6.  
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  10.     <link rel="stylesheet" href="style.css" />
  11.   </head>
  12.  
  13. <body>
  14.  
  15.   <div id="left">
  16.   </div>
  17.  
  18.   <div id="middle">
  19.   </div>
  20.  
  21.   <div id="right">
  22.   </div>
  23.  
  24. </body>
  25.  
  26. </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
  1. #left {
  2.   float:left;
  3.   width:200px;
  4.   height:500px;
  5.   border:1px solid #000;
  6. }
  7.  
  8. #middle {
  9.   float:left;
  10.   width:200px;
  11.   height:500px;
  12.   border:1px solid #000;
  13. }
  14.  
  15. #right {
  16.   float:left;
  17.   width:200px;
  18.   height:500px;
  19.   border:1px solid #000;
  20. }
Now you know two ways to make a three column layout, simply by using the powerful style "float:left;".
Attached Files
File Type: zip Example 1.zip (621 Bytes, 389 views)
File Type: zip Example 2.zip (644 Bytes, 332 views)
Apr 22 '08 #1
  • viewed: 8380
Share:
1 Comment
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

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Martin Gutowski | last post: by
1 post views Thread by TheMartian | last post: by
reply views Thread by Alfred | last post: by
2 posts views Thread by dbasch | last post: by
3 posts views Thread by =?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?= | last post: by
3 posts views Thread by Mark | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.