How to create a horizontal bar that stretches across screen but is not in the body tag?

Question

Very basic question!

I have a background pattern that repeats itself throughout the body tag. I would also like to have a top bar and bottom bar (head/footer) to repeat on the x axis - creating a nice sandwich style of solid color, pattern and solid color again for the background.

How can this be accomplished?

The bars need to be 100% width - which is why this isn't being done through the content wrapper or the header/footer div as they are set to 1000px wide. The color bars should go across the entire screen.

score 6 · Answer 1 · answered Jun 01 '11 at 22:09

6

You should:

Ensure you have html, body { margin: 0; padding: 0 }
Add the #headerBar and #footerBar outside of your "content wrapper".

Something like this: http://jsfiddle.net/GDDA5/

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

Or if you would like the bars to stick to the viewport and be behind content: http://jsfiddle.net/GDDA5/3/

answered Jun 01 '11 at 22:09

thirtydot

224,678
48
389
349

The header works - my problem is the footer. The footer bar is forced down under the actual content. What I want to do is to continue it horizontally- behind the content. I was wondering if some sort of positioning or z-index trick was needed. – Tigger Jun 01 '11 at 22:36
@Tigger: Did you check the second jsFiddle link in my answer? – thirtydot Jun 01 '11 at 22:38
Yes, I did - thank you for that answer as well. I am looking for an answer that is viewport independent. Here is a site that has the header and footer with the same design I am trying to achieve. http://www.mwatoday.com/initiatives/mwa_grant_program.aspx – Tigger Jun 02 '11 at 15:52
After reviewing the CSS - I see how they achieved the footer. The blue footer color is actually the body color and then the content wrapper is white - creating the sandwich look. On my site - the body background is a pattern and the content wrapper has its own background so it doesn't work for my situation. – Tigger Jun 02 '11 at 15:54

score 0 · Answer 2 · answered Nov 05 '12 at 22:02

0

i'm late to the parity here, but use css3!

#selector:after { content: '|' }

answered Nov 05 '12 at 22:02

jahrichie

1,215
3
17
26

score 0 · Answer 3 · answered Mar 12 '13 at 16:24

0

You should take the footer div out of the content wrapper div, then it should take the body width dimensions automatically, giving you the effect you are looking for.

answered Mar 12 '13 at 16:24

Etorres

1

How to create a horizontal bar that stretches across screen but is not in the body tag?

3 Answers3