TutorialNinja Logo
Forgot Password • Register
PHP 47 Visual Basic 15 Javascript 14 HTML 12 Adobe Photoshop 10
Adobe Fireworks 1 Adobe Photoshop 10 Adobe Illustrator 0 Adobe InDesign 0 Gimp 0
C/C++ 3 Python 1 Visual Basic 15 Visual C# 1
Adobe Dreamweaver 0 Adobe Muse 0 ASP.net 0 .htaccess 6 CSS 5 Perl 0 PHP 47 PHP - User System 1 HTML 12 Java 0 Javascript 14 Ruby on Rails 0 General Web Development 4
CentOS 3 Debian 0 Ubuntu 0 Macintosh 1 Windows 7 Unraid 1
Adobe After Effect 0 Adobe Premiere 0 Adobe Audition 0 Final Cut 0 FruityLoops 0 iMovie 0 Windows Movie Maker 0
Apple Swift 0
Arduino 0 Raspberry Pi 1
ChatGPT 1
Site Statistics
Total Members
523
Total Tutorials
134
Newest User
jonyoyo
Todays Guests
854
1 Users • 6 Guests Online

Making CSS Layouts


Basic two column layout with left menu:

TutorialNinja Image

HTML Code 
  1. <html>
  2. <head>
  3. <title>Two Column CSS Layout</title>
  4. <style type="text/css">
  5.  
  6. body
  7. { margin-top: 0;
  8.   margin-bottom: 0;
  9.   margin-left: 0;
  10.   margin-right: 0;
  11.   padding-left: 0;
  12.   padding-right: 0;
  13. }
  14.  
  15. #menu {
  16.   position: absolute;
  17.   left: 5px;
  18.   padding: 0px;
  19.   width: 150px;
  20. }
  21.  
  22. #content {
  23.  
  24.   margin-left: 200px;
  25.   padding: 0px;
  26.   margin-right: 15px;
  27. }
  28.  
  29. </style>
  30. </head>
  31. <body>
  32.  
  33. <div id="menu">
  34.  
  35. Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
  36.  
  37. </div>
  38.  
  39.  
  40. <div id="content">
  41. All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
  42. </div>
  43.  
  44.  
  45. </body>
  46. </html>


----------------

Basic two column layout with right menu:

TutorialNinja Image

HTML Code 
  1. <html>
  2. <head>
  3. <title>Two Column CSS Layout with Right Menu</title>
  4. <style type="text/css">
  5.  
  6. body
  7. { margin-top: 0;
  8.   margin-bottom: 0;
  9.   margin-left: 0;
  10.   margin-right: 0;
  11.   padding-left: 0;
  12.   padding-right: 0;
  13. }
  14.  
  15. #menu {
  16.   position: absolute;
  17.   right: 5px;
  18.   padding: 0px;
  19.   width: 150px;
  20. }
  21.  
  22. #content {
  23.  
  24.   margin-left: 0px;
  25.   padding: 0px;
  26.   margin-right: 200px;
  27. }
  28.  
  29. </style>
  30. </head>
  31. <body>
  32.  
  33. <div id="menu">
  34.  
  35. Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #menu selector in the style sheet that is located on this page between the head tags.
  36.  
  37. </div>
  38.  
  39.  
  40. <div id="content">
  41. All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
  42. </div>
  43.  
  44.  
  45. </body>
  46. </html>


----------------

Basic two column layout with header:

TutorialNinja Image

HTML Code 
  1. <html>
  2. <head>
  3. <title>Two Column CSS Layout with Header</title>
  4. <style type="text/css">
  5.  
  6. body 
  7. { margin-top: 0;
  8.   margin-bottom: 0;
  9.   margin-left: 0;
  10.   margin-right: 0;
  11.   padding-left: 0;
  12.   padding-right: 0;
  13. }
  14.  
  15. #header {
  16.   margin: 20px;
  17.   padding: 10px;
  18.   height: 100px;
  19. }
  20. #left {
  21.   position: absolute;
  22.   left: 15px;
  23.   top: 160px;
  24.   width: 200px;
  25. }
  26. #center {
  27.   top: 0;
  28.   margin-left: 230px;
  29.   margin-right: 15px;
  30. }
  31. </style>
  32. </head>
  33.  
  34. <body>
  35.  
  36. <div id="header">
  37.  
  38. Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
  39.  
  40. </div>
  41.  
  42. <div id="left">
  43.  
  44. Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
  45.  
  46. </div>
  47.  
  48.  
  49. <div id="center">
  50. All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
  51. </div>
  52.  
  53. </body>
  54. </html>


----------------

Basic three column layout:

TutorialNinja Image

HTML Code 
  1. <html>
  2. <head>
  3. <title>Three Column CSS Layout</title>
  4. <style type="text/css">
  5.  
  6. body 
  7. { margin-top: 0;
  8.   margin-bottom: 0;
  9.   margin-left: 0;
  10.   margin-right: 0;
  11.   padding-left: 0;
  12.   padding-right: 0;
  13. }
  14.  
  15. #left {
  16.   position: absolute;
  17.   left: 5px;
  18.   padding: 0px;
  19.   top: 0px;
  20.   width: 150px;
  21. }
  22.  
  23. #center {
  24.   margin-left: 200px;
  25.   padding: 0px;
  26.   margin-right: 200px;
  27.   top: 0px;
  28. }
  29. #right {
  30.   position: absolute;
  31.   right: 15px;
  32.   padding: 0px;
  33.   top: 0px;
  34.   width: 150px;
  35. }
  36. </style>
  37. </head>
  38.  
  39. <body>
  40.  
  41. <div id="left">
  42.  
  43. Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
  44.  
  45. </div>
  46.  
  47.  
  48. <div id="center">
  49. All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
  50. </div>
  51.  
  52. <div id="right">
  53.  
  54. Your right menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
  55.  
  56. </div>
  57.  
  58. </body>
  59. </html>


----------------

Basic three column layout with header:

TutorialNinja Image

HTML Code 
  1. <html>
  2. <head>
  3. <title>Three Column CSS Layout with Header</title>
  4. <style type="text/css">
  5.  
  6. body 
  7. { margin-top: 0;
  8.   margin-bottom: 0;
  9.   margin-left: 0;
  10.   margin-right: 0;
  11.   padding-left: 0;
  12.   padding-right: 0;
  13. }
  14.  
  15. #header {
  16.   margin: 20px;
  17.   padding: 10px;
  18.   height: 100px;
  19. }
  20. #left {
  21.   position: absolute;
  22.   left: 15px;
  23.   top: 160px;
  24.   width: 200px;
  25. }
  26. #center {
  27.   top: 0;
  28.   margin-left: 230px;
  29.   margin-right: 230px;
  30. }
  31. #right {
  32.   position: absolute;
  33.   right: 15px;
  34.   top: 160px;
  35.   width: 200px;
  36. }
  37. </style>
  38. </head>
  39.  
  40. <body>
  41.  
  42. <div id="header">
  43.  
  44. Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
  45.  
  46. </div>
  47.  
  48. <div id="left">
  49.  
  50. Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
  51.  
  52. </div>
  53.  
  54.  
  55. <div id="center">
  56. All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
  57. </div>
  58.  
  59. <div id="right">
  60.  
  61. Your right menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
  62.  
  63. </div>
  64.  
  65. </body>
  66. </html>


If you need any help, just reply or PM me.
vb_king's Avatar
Author:
Views:
2,471
Rating:
Posted on Sunday 4th May 2008 at 03:06 AM
JakkyD
JakkyD's Avatar
Nice and clear tutorial
Posted on Sunday 7th October 2007 at 06:48 PM
Thug
Thug's Avatar
amazing tutorial, i will use this for my next site