Advanced Search

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.

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.