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: full width 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. 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!

Frequently Asked Questions (FAQs) about CSS Full Width Bars

How can I make a CSS full width bar responsive?

To make a CSS full width bar responsive, you can use the viewport width (vw) unit. This unit is based on the width of the user’s viewport, so it will automatically adjust to different screen sizes. For example, if you want a full width bar that is always 100% of the viewport width, you can use the following CSS code:

.full-width-bar {
width: 100vw;
}

Why is my CSS full width bar not extending to the full width of the page?

There could be several reasons why your CSS full width bar is not extending to the full width of the page. One common reason is that there is padding or margin on the body or html elements. To fix this, you can set the padding and margin to 0:

body, html {
padding: 0;
margin: 0;
}

How can I center content within a CSS full width bar?

To center content within a CSS full width bar, you can use the CSS flexbox model. This model allows you to align and distribute space among items in a container, even when their size is unknown or dynamic. Here’s an example:

.full-width-bar {
display: flex;
justify-content: center;
align-items: center;
}

How can I add a background color to a CSS full width bar?

To add a background color to a CSS full width bar, you can use the background-color property. For example, if you want to make the background color red, you can use the following CSS code:

.full-width-bar {
background-color: red;
}

How can I make a CSS full width bar sticky?

To make a CSS full width bar sticky, you can use the position property with a value of sticky. This will make the bar stick to the top of the viewport when you scroll down. Here’s an example:

.full-width-bar {
position: sticky;
top: 0;
}

How can I add a border to a CSS full width bar?

To add a border to a CSS full width bar, you can use the border property. This property allows you to specify the width, style, and color of the border. Here’s an example:

.full-width-bar {
border: 1px solid black;
}

How can I add padding to a CSS full width bar?

To add padding to a CSS full width bar, you can use the padding property. This property allows you to specify the amount of space between the content of the bar and its border. Here’s an example:

.full-width-bar {
padding: 10px;
}

How can I add a gradient background to a CSS full width bar?

To add a gradient background to a CSS full width bar, you can use the linear-gradient function with the background property. This function allows you to create a gradient that transitions between two or more colors. Here’s an example:

.full-width-bar {
background: linear-gradient(to right, red, orange);
}

How can I add a shadow to a CSS full width bar?

To add a shadow to a CSS full width bar, you can use the box-shadow property. This property allows you to apply a shadow effect to the bar. Here’s an example:

.full-width-bar {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

How can I add a transition effect to a CSS full width bar?

To add a transition effect to a CSS full width bar, you can use the transition property. This property allows you to specify the duration, timing function, and delay of a transition. Here’s an example:

.full-width-bar {
transition: background-color 0.5s ease;
}