Post
Ask Question

3-Column CSS Layout

Introduction

 
This article will help you to create a 3-column CSS web page using asp.net.

Step- 1

Create a .css file and use the below code
  1. * { padding: 0; margin: 0; }  
  2. body {  
  3. font-family: Arial, Helvetica, sans-serif;  
  4. font-size: 13px;  
  5. }  
  6. #wrapper {  
  7. margin: 0 auto;  
  8. width: 922px;  
  9. }  
  10. #header {  
  11. color: #333;  
  12. width: 900px;  
  13. float: left;  
  14. padding: 10px;  
  15. border: 1px solid #ccc;  
  16. height: 100px;  
  17. margin: 10px 0px 5px 0px;  
  18. background: #BD9C8C;  
  19. }  
  20. #leftcolumn {  
  21. color: #333;  
  22. border: 1px solid #ccc;  
  23. background: #E7DBD5;  
  24. margin: 0px 5px 5px 0px;  
  25. padding: 10px;  
  26. height: 350px;  
  27. width: 195px;  
  28. float: left;  
  29. }  
  30. #content {  
  31. float: left;  
  32. color: #333;  
  33. border: 1px solid #ccc;  
  34. background: #F2F2E6;  
  35. margin: 0px 5px 5px 0px;  
  36. padding: 10px;  
  37. height: 350px;  
  38. width: 456px;  
  39. display: inline;  
  40. }  
  41. #rightcolumn {  
  42. color: #333;  
  43. border: 1px solid #ccc;  
  44. background: #E7DBD5;  
  45. margin: 0px 0px 5px 0px;  
  46. padding: 10px;  
  47. height: 350px;  
  48. width: 195px;  
  49. float: left;  
  50. }  
  51. #footer {  
  52. width: 900px;  
  53. clear: both;  
  54. color: #333;  
  55. border: 1px solid #ccc;  
  56. background: #BD9C8C;  
  57. margin: 0px 0px 10px 0px;  
  58. padding: 10px;  
  59. } 
Step- 2

Download default.aspx and refer the CSS in that page to see the output


Similar Articles