[Solved] Section in different colour stretching across the width of the page

[Patri]

http://www.bishbashbangers.com/menu/

I would like to add above the cake a section with background colour that stretches across the page, similar to the mustard coloured section below, where the facebook and twitter icon sit.

Not sure if I’m explaining well… basically the CSS code to create a section with a different background colour that stretches alongside the whole of the width of the page.

Any help most appreciated, thanks!

[JustinF]

Chris had a post on this a while back.

Full Browser Width Bars

[Paulie_D]

The simplest method is to close whatever wrapping div you have that restricts the width, have your 100% wide area div and, if necessary re-open a new wrapper.

Just because it’s called a wrapper doesn’t mean it had to wrap everything.

We get too wrapped up (pun intended) in this ‘wrapper’ thing, forgetting that these are helper divs for specific uses not the final word on what they can and can’t be used for,

http://codepen.io/Paulie-D/pen/oGKtA

[Patri]

Thank you so much.

I don’t know much about code but will follow Chris’s code and see if I’m successful (thanks JustinF)

Paulie_D: Your answer sounds great but unfortunately I can’t really follow it as I don’t know about code.

I’m good at seeing code, copying, pastying and changing as necessary. From scratch I can’t really build it.

But yes, you’re spot on with the image. That’s EXACLY what I want to accomplish.

[Paulie_D]

Hmmm…sounds like a learning opportunity.

Cutting & Pasting is all very well (heck, I do it all the time in Jquery) but digging in and learning the way things work (and why) for yourself is always worthwhile.

You’re going to be adding divs and CSS anyway…so a little extra code can’t hurt.

[Patri]

Agree.

I’m an 5EO but love learning about al the different bits and pieces.

Hopefully I’ll get it to work.

Thanks again :)

[Author]

Posts