table layout test

by SebastianPataneMasuelli

HTML

<link rel="stylesheet" href="http://sandbox.admarketplace.com/creative/sebastian/ux/amp_site/css/grid.css">
<header></header>
<section class="content">
    <header class="grid_12">
        <h2 class="">A Cleaner Grid</h2>
        <p>or how we're going to spend less time coding site layouts and more time making awesome shit. </p>
    </header>
    <hr class="newRow"/>
    <article class="grid_7 ">
        <section class="media">
            <img src="http://placehold.it/110x120">
            <h3>.media</h3>
            <p>Inspired by nicole Sullivan's Object-Oriented CSS, this is an example of an all-purpose object that adapts to multiple layouts while leaving a small css footprint.</p>
        </section> 
        <section class="media">
            <img src="http://placehold.it/110x120">
            <h3>.grid_*</h3>
            <p>Taking advantage of <code>display: table-cell</code> and <code>box-sizing: content-box</code>, our layout grid lets us add or take away borders and padding, horizontally and vertically align blocks of content.  Best of all, using only 1/4 of the classes. <a href="#" class="noDisplay">learn more.</a> </p>
            <p>hello</p>
        </section> 
        <section class="media">
            <img src="http://placehold.it/110x120">
            <h3>.reusable</h3>
            <p>Building a robust CSS library with objects and reusable classes (i.e. <code>.borderLeft</code>, <code>.floatLeft</code> ) could mean we never have to write a line of CSS again unless we really really really want to.   </p>
        </section>    
    </article>
    <article class="grid_5 textAlignCenter verticalALignMiddle">
        <img class="" src="http://placehold.it/380x360">
    </article>
    <hr class="newRow"/>
    <div class="grid_12">
        <section class="grid_6 media">
            
            <h3>Revenge of the tables.</h3>
            <p>Taking advantage of <code>display: table-cell</code> and <code>box-sizing: content-box</code>, our layout grid...

CSS

body { width: 960px; font-family: Helvetica, Arial; margin: 0 auto;}
header, footer { height: 40px; background-color: lightgray;}
div, section, article, header, footer { border: 0px solid blue; padding: 10px; vertical-align: top; }
.content header { height: auto; background-color: transparent}


.media { overflow: auto; width: auto;  zoom: 1;  line-height: 1em}
.media:after {
    content: '';
    clear: both;
    height: 0px;
    display: block;  
}
.media img { float: left; margin-right: 20px; display: block; }
.media h3 {  display: inline-block; font-size: 1.4em; margin-bottom: 5px; line-height: 1.4em}
.media p { font-size: 1em }




.media p:first-line {  font-variant: small-caps; font-transform: lowercase; font-weight: bold }


h2 { font-size: 2em;  line-height: 1.6em;}
.textAlignCenter { text-align: center;}
.verticalALignMiddle {vertical-align: middle}
.clear {clear: left}
.noDisplay { display: none; }
.noPadding { padding: 0;}
.noPaddingLeft { padding-left: 0 }
.noPaddingRight { padding-right: 0 }
.displayBlock { display: block }
.displayTableCell { display: block }
.newRow {height: 0px; border: 0;}
.borderLeft {border-left: 1px solid lightgray}
code {font-size: 1.08em; color: gray; font-variant: normal}

JavaScript

/*
$('div').click(function() {
    var thisWidth = $(this).width();
    $(this).append('<br />width: ' + thisWidth);
});
*/