By Craig Buckler

How to Extend Wrapped Elements to the Full Browser Width Using CSS

By Craig Buckler

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:

full width design

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />

The outermost page element is centered using CSS code such as:

	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.

	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:


	<div class="content">
		<p>Footer content.</p>

We can then modify the CSS accordingly:

	width: 100%;
	background: url(footer.png) 0 0 repeat-x;

	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:

	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.

View the demonstration page…

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!

  • Chris Coyier came up with another alternative which involves :before and :after pseudo-elements. In both his example and this one, the overflow:hidden to prevent scrollbars only hides them from view, it doesn’t actually stop the page from scrolling. If you click anywhere on the page and drag right, you’ll see all the content move. ;)

    • Thanks John. Yes, both solutions still allow the user to view the “hidden” parts of the page – e.g. use the keyboard to move right.

      As mentioned, I don’t think this is an alternative to wrapper tags. It feels a little hacky to me but it is an option if you can’t/won’t use superfluous tags.

  • Good solution. I’m not convinced that the header and footer of the site should be within the article. They are site header and site footer in your example, and so are not part of the article. The article, of course, can have its own header and footer.

    Of course, I realize this is just a simple example, and the generic solution has much wider application, so thank you for it!

    • Congratulations Patrick — I knew someone would spot that! As you mention, the site header and footer would normally be outside the article anyway. Also, since the footer has a single paragraph, you could make the footer 100% width and size the p tag accordingly.

      But, as you highlighted, it’s an example to illustrate a generic problem in CSS. In a real site, I’d probably put a div around the whole page … but I didn’t want to add a wrapper tag before discussing wrappers (even though that’s effectively what the article tag is).

  • Concerned about semantics, somehow we’ve ended up using class names such as “extendLeft”.

    Unfortunately the sad fact is, making computers work with human concepts (presentation) is always going to be hacky.

    • Obviously, you don’t need to use those class names. But, for the purposes of an example it makes a lot of sense.

  • Efren

    Hi !

    Terrific contribution ! Thanks !!

    Regards from mexico, sitepoint its awesome !!!

  • Thanks for this, Craig. But would you happen to have a link available to a page that explains how to use this for equal height columns? (What’s the key to making this work for equal height columns?)

    • For columns or, more specifically, columns where the background color goes all the way down to the bottom of the longest column, you add “padding-bottom: 10000px” then use “margin-bottom: -10000px”.

      That’s not the only solution and it’s not always practical, but it’s easy to try out.

  • Tom Wardrop

    Something bothers me about using arbitrarily large figures for position, such as “3000px”. It makes quite an assumption about the nature of user agent accessing the site. 3000px may seem like a lot to your average desktop monitor, but there are other things to consider, like future technologies and devices which you can’t comprehend, as well as browser scaling functions which can turn 3000px into 300px at 10% zoom. It’s like those background images which assume no one has a monitor larger than 1680×1050.

    It seems you’ve sacrificed the potential scaling of your CSS in order to achieve better “semantics”, for HTML is notoriously unsemantic as it’s semanticity depends on assumptions about the web page which are often wrong, especially for web applications. I personally would have much preferred the wrapping DIV instead of adhering to an idealism that just isn’t realistic with todays standards. I have no problem with making a website more semantic, just not at the cost of something else. For as long as CSS depends on HTML elements to hook-into, completely semantic web pages will remain elusive.

    • Remember that it’s 3000px in either direction so that’s a total of 6,000 pixels plus the page width. You can future-proof it further — use 5000px, 9999px or even 9999999px but, realistically, I think you have a few years before it becomes a problem.

      If you have the choice, using an HTML wrapper is likely to be more efficient. But this is a quick solution for those developers who can’t or don’t want to edit the page source.

  • John Natoli

    I’ve run into issues doing things like this with negative margins and overflow-x hidden particularly on mobile devices where scrolling is on swipe or drag and hor/vert motion is less defined than a scrollbar. I do think that it is a better solution than wrappers and improperly nested elements. Modern browsers are in pretty good shape so I think it’s about time we start shifting priorities a bit. Thanks for the tip!

    • HTML wrapper elements will pose fewer problems but it’s good that CSS gives us another option should we require it.

  • Misty Lounsbury

    for the love of god I have been searching for 4 hours and finally found you with my answer the angels are singing and the rays of heaven beam down upon your good and true person that you are! Thank you thank you

Get the latest in Front-end, once a week, for free.