How to Extend Wrapped Elements to the Full Browser Width Using CSS
Apologies for the long title but this is a common problem faced in CSS layouts. Often, we require an element to extend beyond the (centered) page width to fill the browser window. Consider a typical page design:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SiteName</title>
</head>
<body>
<article>
<header></header>
<nav></nav>
…content…
<footer></footer>
</article>
</body>
</html>
The outermost page element is centered using CSS code such as:
article
{
width: 70%;
margin: 0 auto;
}
So how do we apply repeating horizontal backgrounds which fill the window? Elements at the top of the page are easy since we can define an image on the body tag, e.g.
body
{
background: url(header.png) 0 0 repeat-x;
}
But we can’t do that for the footer since it’s inside the article and the location is determined by the quantity of content. The most obvious solution is wrapper elements, i.e. we move the footer outside the article and add an inner tag:
…content…
</article>
<footer>
<div class="content">
<p>Footer content.</p>
</div>
</footer>
We can then modify the CSS accordingly:
footer
{
width: 100%;
background: url(footer.png) 0 0 repeat-x;
}
div.content
{
width: 70%;
margin: 0 auto;
}
It’s a solution we all use even though it offends the semantic HTML gods. The inner div isn’t necessary — we’ve added it for the purpose of CSS styling.
Fortunately, there are cross-browser solutions which don’t require additional tags. The simplest method is to add a large amount of padding then move the element back to its original location with a negative margin. It’s a technique which is often used to create equal-height columns but, in this case, we’re applying it to the widths:
body
{
overflow-x: hidden;
}
.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}
.extendfull, .extendright
{
padding-right: 3000px;
margin-right: -3000px;
}
When the “extendleft” class is applied to an element, it will extend to the left-hand edge of the browser. Similarly, “extendright” extends it to the right-hand edge and “extendfull” does both. To prevent horizontal scrolling, we apply overflow-x: hidden to the body.
The technique works in IE8, IE9, Firefox, Chrome, Safari and Opera. It’s not a replacement for wrapper tags but it does offer an alternative solution for some layout issues.
But I Absolutely Must Support IE6 and IE7!
Really? Are you sure? This technique won’t break your designs but IE6 refuses to show a background beyond the limits of the outer element. IE7 tries its best but, although “extendleft” usually works, that’s not the case for “extendright”.
Personally, I would leave the legacy browsers as they are … but I’m not your boss. Fortunately, you can fix the issue with a little CSS trickery:
/* IE6/7 fix */
.extendfull, .extendleft, .extendright
{
position: relative;
display: inline;
float: left;
width: 100%;
}
If you’re lucky, this won’t have a detrimental affect on your layout in modern browsers. If it does, you’ll need to tweak yours styles accordingly, use a conditional stylesheet, or add some horrible IE6/7 hacks. Best of luck!
