Fluid Grids

Fluid Grids

by Angelo Rogério Rubin

HTML

<div id="page">
    <h1>The Ratio Revolution Will Not Be Televised</h1>

    <div class="entry">
        <h2>Anyone else tired of Helvetica?</h2>

        <h3 class="info">A <a href="#">Blog</a> Entry:</h3>

        <div class="content">
            <div class="main">
                <p>Main content goes here. Lorem ipsum etc., etc.</p>
            </div><!-- /end .content -->

            <div class="meta">
                <p>Posted on etc., etc.</p>
            </div><!-- /end .meta -->
        </div><!-- /end .main -->
    </div><!-- /end .entry -->
</div><!-- /end #page -->

CSS

#page {
    margin: 40px auto;
    padding: 0 1em;
    max-width: 61.75em; /* 988px / 16px = 61.75em */
    border: 1px solid #CCC;
}

h1 {
    margin-left: 144px;
    width: 700px;
}