css wide line

container is limited, but header and footer are wide:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>page title</title>
</head>
<body>
<div class="container">
    <header class="header">
        header
    </header>
    <nav>
        navigation
    </nav>
    <article>
        <section>
            <p>content</p>
        </section>
    </article>
    <aside>
        sidebar
    </aside>
    <footer class="footer">
        footer
    </footer>
</div>
</body>
</html>

html {
    overflow-x:hidden;
}
.container {
    max-width:200px;
    margin:0 auto;
    background:#afa;
}
.header, .footer {
    background:#ffa;
    border-bottom:1px solid #777;
    position:relative;
}
.header:before, .footer:before {
    content:"";
    display:block;
    background:#ffa;
    border-bottom:1px solid #777;
    height:100%;
    width:6000px;
    position:absolute;
    left:-2000px;
    top:0;
    z-index:-1;
}

web-profile

css wide line

Leave a Reply Cancel reply