Advanced Search

Return to Snippet

Revision: 50417
at August 20, 2011 10:50 by marshalletm
Initial Code 
<!DOCTYPE html>

<html>
<head>
    <title>Testing FourSquare</title>
    <link rel="stylesheet" href="square.css" type="text/css" media="screen" />
<style>

body {
    width: 660px;
    background: #252525;
    display: block;
    margin: 10px auto;
}
#foursquare {
    background: #F0F0F0;
    width: 640px;
    height: auto;
    margin: auto;
    padding: 1px;
    display: block;
    position: absolute;
    border-radius: 15px;
}
    #topleft {
        background: #747171;
        width: 300px;
        height: 300px;
        margin: 10px;
        display: block;
        float: left;
        border-radius: 15px;    
    }
    #topright {
        background: #747171;
        width: 300px;
        height: 300px;
        margin: 10px;
        display: block;
        float: left;
        border-radius: 15px;    
    }
    #bottomleft {
        background: #747171;
        width: 300px;
        height: 300px;
        margin: 10px;
        display: block;
        float: left;
        clear: left;
        border-radius: 15px;    
    }
    #bottomright {
        background: #747171;
        width: 300px;
        height: 300px;
        margin: 10px;
        display: block;
        float: left;
        border-radius: 15px;    
    }


</style>
</head>

<body>
    
    <div id="foursquare">
        <div id="topleft">
        </div>
        <div id="topright">
        </div>
        <div id="bottomleft">
        </div>
        <div id="bottomright">
        </div>
    </div>




</body>
</html>
Initial URL 









Initial Description





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









Initial Title





Four Square Layout









Initial Tags





css, html









Initial Language





HTML