Simple CSS3 Layout 2

Header + Text + Footer

by goodfriend

HTML

<div id="celek">
    <header>
        <div class="hornipad">
            <h1>ultricies</h1> adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas.</div>
    </header>
    <div id="stred">
        <div class="stredpad">
             <h2>Lorem Ipsum</h2>

            <p>Mauris eget sodales eros. Nam fermentum, mauris vel posuere ultricies, dui risus pretium elit, at aliquam nulla metus id massa. Duis laoreet fringilla laoreet. Quisque feugiat semper libero, id auctor felis eleifend nec. Donec adipiscing massa eu est facilisis fermentum. Mauris ac justo eget neque accumsan interdum in vitae arcu. Fusce ultricies adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida eget. Maecenas nec dolor non urna facilisis luctus. Ut ante velit, aliquet in blandit sit amet, vulputate eget urna. Maecenas diam tortor, iaculis quis mattis posuere, sodales a nunc. Phasellus vehicula libero sed velit dapibus bibendum tristique mauris convallis. Integer gravida est eu mi semper id porta odio scelerisque.</p>
            <section>
                <article>Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida eget. Maecenas nec dolor non urna facilisis luctus. Ut ante velit, aliq</article>
            </section>
        </div>
    </div>
    <footer>
        <div class="footerpad">ce ultricies adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida</div>
    </footer>
</div>

CSS

/* CSS Document */
 html, body {
    margin:0;
    padding:0;
    height:100%;
}
body {
    background-color: #9b9b9b;
    text-align:center;
}
body, td {
    font-size: 10pt;
    letter-spacing: 1px;
    color: #000;
    font-family: Tahoma;
}
a:link, a:active, a:visited {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}
a:hover {
    color: #5b5b5b;
    letter-spacing: 1px;
}
.act:link, .act:active, .act:visited, .act:hover {
    color: #f5f384;
}
#celek {
    min-height:100%;
    width:100%;
    position:relative;
    text-align:center;
}
header {
    z-index: 20;
    -webkit-border-radius: 0px 0px 75px 75px;
border-radius: 0px 0px 75px 75px; 
    -webkit-box-shadow: 1px 1px 10px 3px rgba(5, 5, 5, 0.5);
    box-shadow: 1px 1px 10px 3px rgba(5, 5, 5, 0.5);
    background: rgb(125, 185, 232);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(125, 185, 232, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(59, 103, 158, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(125, 185, 232, 1)), color-stop(50%, rgba(43, 136, 217, 1)), color-stop(100%, rgba(59, 103, 158, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(125, 185, 232, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(59, 103, 158, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(125, 185, 232, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(59, 103, 158, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(125, 185, 232, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(59, 103, 158, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(125, 185, 232, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(59, 103, 158, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#3b679e', GradientType=0);
    /* IE6-9 */
    display: block;
    width: 100%;
    height:...