my little boxes

demo april 11th

by Xander Taylor

HTML

<!--this pane is the body-->
<section id="outerBox">
    <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
        <div id="redBox">
        <p>Small Red Box.</p>
    </div>
    <div id="greenBox">
        <p>Green Box.</p>
    </div>
    <div id="blueBox">
        <p>Big Blue Box.</p>
    </div>
</section>

CSS

body {font-family: Helvetica; color: white;}

#outerBox {
    border: 2px dashed purple;    
    //overflow: auto;
}
div { padding: 5px;  margin: 5px;} 

#redBox {
    background-color: red; height: 100px; width: 100px;
    //float: left;
}
#greenBox {
    background-color: green; height: 150px; width: 150px;
    //float: left;
    opacity: 0.9;
    position: fixed;
    //top: 20px;
    //left: 20px;
    bottom: 0;
    right: 0;
}

#blueBox {
    background-color: blue; height: 200px;  width: 200px; 
    //float: left;

}