Need help coding a 100% width header

[norman144]

I designed this header in photoshop and its kicking my butt trying to code it up right in CSS with it being flixable a bit also. not just fixed.

here is the link to the image:

im wasting the entire morning trying to do it, so im asking for any help i can get.

as you can see i need the pag-wrap to be centered at about 80% page width. but behind the page header i need the header colors to be full length, orange on the left and light green on the right. Its a bit harder that it looks. Im sure thee is a solution but obviously I havent done this before.

I have code as:

/">

How would you guys do it? i can slice up the images and use as backgrounds in header-left and header-right, but cant figure out how to have the header colors extend full width

[norman144]

Hmm.. I put the HTML code between so im not sure why its not showing correctly. much is even missing. So help with that also.

[AmruthPillai]

@norman144 Try to recreate the situation using http://codepen.io/pen/ if possible and share the link here so we can all work actively to find a solution :)

[Paulie_D]

It looks simple enough to me although you will need an image for the ‘arrow’ end.

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

[norman144]

thanks Paulie_D and AmruthPillai. I was able to find a solution that worked, although it is far more complex than Paulie_D’s version, will I will use some of :-).

I also totally forgot about using codepen.io. likely because my code wasn’t working, but i will in future. A good learning experience. so thanks all.

[Author]

Posts