html - Create 3 boxes side-by-side -

html - Create 3 boxes side-by-side -

this have far, mrmansam, helped out on my previous question. how can create boxes in image?

class="lang-css prettyprint-override">.wrap { text-align: center; } table { display: inline-table; border-collapse: collapse; } td { border: solid 1px #ccc; padding: 10px; } <div class="wrap"> <table> <tr> <td>test 1</td> </tr> </table> <table> <tr> <td>test 2</td> </tr> </table> <table> <tr> <td>test 3</td> </tr> </table>

there 1000000 ways this, here one:

html

<div class="box"> <header> <h2>stuff</h2> </header> <div class="body">things</div> </div> <div class="box"> <header> <h2>stuff</h2> </header> <div class="body">things</div> </div> <div class="box"> <header> <h2>stuff</h2> </header> <div class="body">things</div> </div>

css:

body { /* body hack jsfiddle, not utilize */ overflow-x: scroll; width:900px; } div.box { border-radius: 8px; box-shadow: 1px 1px 0px #555; min-width: 200px; display: inline-block; vertical-align: top; overflow: hidden; } div.box > header { background: #333; color: white; padding: 1px 20px; } div.box > header > h2 { line-height:20px; font-size:20px; text-align: center; } div.box div.body { line-height:20px; font-size:20px; color:#333; background:#eaeaea; padding: 20px; }

please see result here: http://jsfiddle.net/u5jxk2qs/

it wanted. hope helps.

html css