Display-Inline Elements

Display-Inline Elements

by Nirvanachain

HTML

<div class="wrapper">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
</div>

CSS

.wrapper {
    word-spacing: -0.25em;
}

.one {height:100px; width:45%; background-color:green;}
.two {height:200px; width:45%; background-color:gray;}
.three {height:50px; width:45%; background-color:blue;}

.box {
    display: inline-block;
    vertical-align: top;
    word-spacing: normal;
    *display:inline;zoom:1; /** needed for inline-block in ie7 **/
}
/** Adjacent inline-block elements have a word space between them, so setting a negative word spacing removes that so they're flush against each other. Then you have to reset it for the products. **/