Floated Div 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 centered but you still have to use a little math to get the margin: so if the boxes are 40% and there are 2 boxes that is 80%, which leaves 20% for margin. So you make the margin-left 5% because there are 2 boxes - so 2 x 5% = 10% - which leaves 10% for the space on the right. Then you set the max-width of the container to 960px so it all works out.</p><p>But even this starts to break if you go make the window too small. Make sure to maximize your broswer window then try dragging the inner window around to see what happens. You can also try to change the class of the second box to "box2" then hit run and see what happens.</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;
    padding:10px;
    border: 2px solid red;
}
@media only screen and (max-width:480px) {
    .box {
        width: 100%;
    }
}