Centering content inside full-width blocks

This is something I’ve wondered for a while. Given the following example:

You’ll notice I need <div class="content"> inside each full-width block in order to centre it to 1000px. Is this possible without the repeated <div> inside each block (nav, article and footer). It seems like this should be somehow possible with padding or pseudo elements before/after to make the space…

Essentially I’m wondering whether it’s possible to get the same visual output with this HTML:

Making the article,nav and footer elements 1000px centres the content but stops the blocks filling the width. This is possible with a background image on the that contains the background colours but this is obviously not a very nice solution either.

Eh, technically you can. I did the article element here. I usually just add the extra element. Keeps it cleaner/easier for me.

I won’t get into your fixed width issues or any other CSS / HTML issues I see, since that’s outside the scope of your question.

I haven’t tested this outside of Chrome so let me know how this does cross-browser.

Indeed, I’m only using fixed width for this example. Interesting approach. The only obvious problem is that it makes the <body> incredibly wide. I suppose overflow-x: hidden on the body would fix it, although it seems like a bit of a hack.

I did manage to do it myself with box-shadow:

Done on the nav element here… but box-shadow support with multiple shadows isn’t great.

edit: Actually according to IE supports multiple shadows from 9+, that’s perfectly fine for my use-case… in this instance IE8 uses would just see whitespace…

Codepen renders it wide but I’m not getting scrollbars in the live view in Chrome.

I don’t think you gave an updated codepen; I’m not seeing any box shadow there :frowning: .

Well, technically that is “fine” since a responsive website shouldn’t induce scrollbars. Is a band-aid fix though if this was an actual issue.

Apologies, I forked it but didn’t save the changes!

1 Like

Yeah not to mention IE8 is almost non existent. TBH my old work and this work have this (correct IMO) mentality: make sure IE8 users can access the content fine, but don’t care about design issues.


We had this question a while ago and I put up a demo here using box-shadow.

The box-shadow can’t be wider than the middle section or it moves away.

Good point. I suppose given a smaller element you could use 3,4,5,6,etc shadows at different distances to fill the space to a maximum.

Obviously one downside to this approach is that there is going to be a screen-size where it stops… but 3000px should be safe for a few years.

Ok… stage 2 of this problem… what if I want a border between the sections:

I’m thinking a :before or :after, absolutely positioned, 100% width and the same height as a margin:

Is this the best way to achieve this or is there a simpler way?

How far do you want the border extended?

It depends on the overall look you are going for, but if the first/last elements in the markup can’t be used and place the borders on them, then :before for a top border, and :after for the bottom border is fine.

They don’t need to be AP; just display:block; so they will be on a different line than the content.

It gets a bit complicated but you could use multiple box shadows.


<meta charset="utf-8">
<title>Untitled Document</title>
body {
	padding: 0;
	margin: 0
article {
	background-color: green;
	margin:10px auto;
	padding: 10px;
	display: block;
	width: 1000px;
	box-shadow: -1000px 0 green, 1000px 0 green, 1000px 0px 0px 10px red, -1000px 0px 0px 10px red, 0px 10px 0px 0px red, 0px 0px 0px 10px red;

				<h1> Article Content</h1>
		<p>Article text</p>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.