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> |
<!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;
} |
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;
}