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. * { padding0margin0; }  
  2. body {  
  3. font-familyArialHelveticasans-serif;  
  4. font-size13px;  
  5. }  
  6. #wrapper {  
  7. margin0 auto;  
  8. width922px;  
  9. }  
  10. #header {  
  11. color#333;  
  12. width900px;  
  13. floatleft;  
  14. padding10px;  
  15. border1px solid #ccc;  
  16. height100px;  
  17. margin10px 0px 5px 0px;  
  18. background#BD9C8C;  
  19. }  
  20. #leftcolumn {  
  21. color#333;  
  22. border1px solid #ccc;  
  23. background#E7DBD5;  
  24. margin0px 5px 5px 0px;  
  25. padding10px;  
  26. height350px;  
  27. width195px;  
  28. floatleft;  
  29. }  
  30. #content {  
  31. floatleft;  
  32. color#333;  
  33. border1px solid #ccc;  
  34. background#F2F2E6;  
  35. margin0px 5px 5px 0px;  
  36. padding10px;  
  37. height350px;  
  38. width456px;  
  39. displayinline;  
  40. }  
  41. #rightcolumn {  
  42. color#333;  
  43. border1px solid #ccc;  
  44. background#E7DBD5;  
  45. margin0px 0px 5px 0px;  
  46. padding10px;  
  47. height350px;  
  48. width195px;  
  49. floatleft;  
  50. }  
  51. #footer {  
  52. width900px;  
  53. clearboth;  
  54. color#333;  
  55. border1px solid #ccc;  
  56. background#BD9C8C;  
  57. margin0px 0px 10px 0px;  
  58. padding10px;  

Step- 2

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


Similar Articles