Flexie Boxes in Table

Vertical Flex Columns in Horizontal Table Grids

by Dug Sohn

HTML

<body>
    <table cellpadding="6">
        <tbody>
            <tr>
                <td>
                    <div class="grid">
                        <div class="fluid">
                             <h2>Drop Target  </h2>

                        </div>
                        <div class="fixed">
                             <h2>Widget</h2>

                            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                        </div>
                        <div class="fluid">
                             <h2>Drop Target  </h2>

                        </div>
                    </div>
                </td>
                <td>
                    <div class="grid">
                        <div class="fluid">
                             <h2>Drop Target  </h2>

                        </div>
                        <div class="fixed">
                             <h2>Widget</h2>

                            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                        </div>
                        <div class="fluid">
                             <h2>Drop Target  </h2>

                        </div>
                        <div class="fixed">
                             <h2>Widget</h2>

                            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris...

CSS

html, body {
    height:100%;
}
table {
    height:500px;
    overflow:visible
}
table tbody tr td {
    vertical-align:top;
    height:100%
}
.grid2 {
    /*  As of August 2012, only supported in Chrome 21+ */
    display: -webkit-flex;
    display: flex;
}
.col2 {
    flex: 1;
    -webkit-flex: 1;
}
.grid {
    /*  As of August 2012, only supported in Chrome 21+ */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow:visible;
    float:left;
    height:100%;
}
. {
    background: #fff;
}
.fluid:last-child {
    flex: 1;
    -webkit-flex: 1;
}
.fluid {
    padding:0px;
    color: #FFF;
    text-align:center;
    text-transform:uppercase;
    text-shadow: 1px 1px 2px #fff;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    height:30px;
}
.fluid:hover {
    padding:0px;
    background-color: #DCECF6;
    color: #92DCF1;
    text-align:center;
    text-transform:uppercase;
    text-shadow: 1px 1px 2px #fff;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    height:auto;
}
.fixed {
    background: #ececec;
    margin:5px;
    border-radius:20px;
    padding:20px;
}