Centering content inside full-width blocks

HTML & CSS
1

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.

2

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

http://codepen.io/ryanreese09/pen/BNVGga

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.

3

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 http://caniuse.com/#feat=css-boxshadow IE supports multiple shadows from 9+, that’s perfectly fine for my use-case… in this instance IE8 uses would just see whitespace…

4

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.

5

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

1 Like
6

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.

:thumbsup:

7

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.

8

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.

9

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?

10

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.

11

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

12

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

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
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;
}
</style>
</head>

<body>
<article>
		<header>
				<h1> Article Content</h1>
		</header>
		<p>Article text</p>
</article>
</body>
</html>
13

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