CSS Box Model Demo

by Ryan Brewer

HTML

<div class="wrapper">
    
    <! -- notice how there is no white-space between the two divs below. That, along with the "border-box" rule allows you to set their width to 50% -->
    
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et mauris sit amet justo sagittis 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="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et mauris sit amet justo sagittis 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><!-- Closes the wrapper -->

CSS

.wrapper {
    text-align: center;
 
}

.box {
    -moz-box-sizing:border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    max-width: 400px;
    min-width: 200px;
    padding: 10px;
    text-align: center;
    border: 2px solid burlywood;
}

@media only screen and (max-width:480px) {
.box {
    width: 100%;
}
}