Four Square Layout


/ Published in: HTML
Save to your folder(s)

A four square layout design that can be resized and inserted into any larger wrapper.


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2.  
  3. <title>Testing FourSquare</title>
  4. <link rel="stylesheet" href="square.css" type="text/css" media="screen" />
  5.  
  6. body {
  7. width: 660px;
  8. background: #252525;
  9. display: block;
  10. margin: 10px auto;
  11. }
  12. #foursquare {
  13. background: #F0F0F0;
  14. width: 640px;
  15. height: auto;
  16. margin: auto;
  17. padding: 1px;
  18. display: block;
  19. position: absolute;
  20. border-radius: 15px;
  21. }
  22. #topleft {
  23. background: #747171;
  24. width: 300px;
  25. height: 300px;
  26. margin: 10px;
  27. display: block;
  28. float: left;
  29. border-radius: 15px;
  30. }
  31. #topright {
  32. background: #747171;
  33. width: 300px;
  34. height: 300px;
  35. margin: 10px;
  36. display: block;
  37. float: left;
  38. border-radius: 15px;
  39. }
  40. #bottomleft {
  41. background: #747171;
  42. width: 300px;
  43. height: 300px;
  44. margin: 10px;
  45. display: block;
  46. float: left;
  47. clear: left;
  48. border-radius: 15px;
  49. }
  50. #bottomright {
  51. background: #747171;
  52. width: 300px;
  53. height: 300px;
  54. margin: 10px;
  55. display: block;
  56. float: left;
  57. border-radius: 15px;
  58. }
  59.  
  60.  
  61. </head>
  62.  
  63.  
  64. <div id="foursquare">
  65. <div id="topleft">
  66. </div>
  67. <div id="topright">
  68. </div>
  69. <div id="bottomleft">
  70. </div>
  71. <div id="bottomright">
  72. </div>
  73. </div>
  74.  
  75.  
  76.  
  77.  
  78. </body>
  79. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.