CSS HBox

horizontal evenly distributed

by David McClelland

HTML

<div class="box-container">
    <div class="small-box">SOME TEXT & IMAGE </div>
    <div class="small-box">SOME TEXT & IMAGE </div>
    <div class="small-box">SOME TEXT & IMAGE </div>
    <div class="small-box">SOME TEXT & IMAGE </div>
</div>

CSS

div .box-container { 
    display: inline;
    margin: 0.63em 0pt;
    padding: 10px;
    width: 640px; 
    background-color: rgb(229, 231, 225);
    position: relative;
    float: left;
    overflow: hidden;
}

div .small-box {
    border: 1px solid rgb(153, 51, 102);
    margin: 10px 5px;
    padding: 0.325em;
    float: left;
    background-color: rgb(255, 244, 227);
    width: 128px; 
    line-height: 0.85em;
    max-height: 8em; 
    min-height: 8em;
    position: relative;
}