CSS Box Model Demo

by Ryan Brewer

HTML

<div class="wrapper">
    <div id="container">
        <div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et mauris sit amet justo sagitis rutrum. Curabitur eget risus adipiscing, fermentum lacus sed, rhoncus augue. Nullam mauris lacus, volutpat sit amet pellentesque sit amet, blandit at velit. Proin vulputate mi non metus laoreet, id ornare velit luctus. Ut sem sapien, pharetra nec congue sit amet, lobortis eu metus. Vestibulum quis molestie metus, interdum gravida leo. Duis at ligula enim.</div>
        <div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et mauris sit amet justo sagitis rutrum. Curabitur eget risus adipiscing, fermentum lacus sed, rhoncus augue. Nullam mauris lacus, volutpat sit amet pellentesque sit amet, blandit at velit. Proin vulputate mi non metus laoreet, id ornare velit luctus. Ut sem sapien, pharetra nec congue sit amet, lobortis eu metus. Vestibulum quis molestie metus, interdum gravida leo. Duis at ligula enim.</div>
        <div class="clear"></div>
        <div id="explain">
            <p>The 2 floated boxes are almost centered but you still have to use a little math to get the margin.</p>
        </div>
    </div>
    <!-- Closes the container -->
</div>
<!-- Closes the wrapper -->

CSS

.wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    text-align: center;
    background-color: gray;
}
#container {
    position: relative;
    display: block;
    width: 80%;
    max-width:960px;
    margin:0px auto;
    border: 1px solid black;
}
.box1 {
    float: left;
    width:40%;
    max-width:400px;
    min-width:200px;
    margin-left:5%;
    padding: 10px;
    text-align: center;
    border: 2px solid burlywood;
}
.box2 {
    float: right;
    max-width:400px;
    padding: 10px;
    text-align: center;
    border: 2px solid burlywood;
}
.clear {
    clear: both;
}
#explain {
    display: block;
    margin-top:10px;
    border: 2px solid red;
}
@media only screen and (max-width:480px) {
    .box {
        width: 100%;
    }
}