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 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…
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 .
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!
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.
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>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.