HTML example

by sebastianauer

HTML

<body>
    <div id="container" class="layout-978">
        <header id="header" class="clearfix">
            <section id="mark" class="col5">
                <span id="corp-name">Some Bigger Corporation</span>
            </section>
            <nav class="col7">
                <ul>
                    <li class="first"><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Investing</a></li>
                    <li class="last"><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        
        <section id="main" role="main" class="row">
        <h1>The Headline</h1>
        <p class="">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam tortor nunc, lacinia vel volutpat vel, facilisis blandit orci. Mauris in quam eros. Donec sagittis tortor sapien. Praesent in mauris lorem. Nam non eros id quam viverra vehicula.</p>
        
        <h2>The headline 2</h2>
        <p class="">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam tortor nunc, lacinia vel volutpat vel, facilisis blandit orci. Mauris in quam eros. Donec sagittis tortor sapien. Praesent in mauris lorem. Nam non eros id quam viverra vehicula. Sed varius lacus eu nisl iaculis sollicitudin. Nulla facilisi. Etiam congue nisi quis nulla tempor eu congue ipsum tincidunt. Proin eleifend tortor non eros aliquet malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed varius lacus eu nisl iaculis sollicitudin. Nulla facilisi. Etiam congue nisi quis nulla tempor eu congue ipsum tincidunt. Proin eleifend tortor non eros aliquet malesuada. Vestibulum...

CSS

.layout-978 { width: 978px; margin: 0px auto; }

 .row { height: 1%; }
 .row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }

 .col1,  .col2,  .col3,  .col4,  .col5,  .col6,  .col7,  .col8,  .col9,  .col10,  .col11,  .col12 { float: left; margin-left: 30px; }
 .col1:first-child,  .col2:first-child,  .col3:first-child,  .col4:first-child,  .col5:first-child,  .col6:first-child,  .col7:first-child,  .col8:first-child,  .col9:first-child,  .col10:first-child,  .col11:first-child,  .col12:first-child { margin-left: 0px; }
 .col1 { width: 54px; }
 .col2 { width: 138px; }
 .col3 { width: 222px; }
 .col4 { width: 306px; }
 .col5 { width: 390px; }
 .col6 { width: 474px; }
 .col7 { width: 558px; }
 .col8 { width: 642px; }
 .col9 { width: 726px; }
 .col10 { width: 810px; }
 .col11 { width: 894px; }
 .col12 { width: 978px; }


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px...