By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,569 Members | 1,350 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Simple Three Column Layout

Death Slaught
100+
P: 1,137
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, 371 views)
File Type: zip Example 2.zip (644 Bytes, 315 views)
Apr 22 '08 #1
Share this Article
Share on Google+
1 Comment


100+
P: 201
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