Headers and footers best practice?

[simbob]

This seems like it should be fundamental, but i can't seem to find a simple way of doing this. I have a site which is laid out centrally (margin: 0 auto; ) with a width of 1000px, but i want a chunky black line that extends infinitely across the browser window edge to edge top and bottom.

What's the best way to achieve this? i've tried all sorts of things from background 'body' images repeated (fine for one or the other) to wrapping in div's and relative/absolute positioning, but nothing seems to work right for both top and bottom. Can help thinking i may be over-thinking this!

 

[chrishirst]

Have you tried;

body {
    border: 0 black solid;
    border-width: 1em 0;
}

 

[simbob]

I'll try that out, thanks

 

[simbob]

Have you tried;

body {
    border: 0 black solid;
    border-width: 1em 0;
}

Didn't work for the body element, but worked applied to a div immediately inside the body

 

[AsheSkyler]

Somebody once told me to do this:

body, html {width: 100%; height: 100%;}

Something about only IE filling the whole viewport with the body. Been a few years.

 

[Frank]

Somebody once told me to do this:

body, html {width: 100%; height: 100%;}

Something about only IE filling the whole viewport with the body. Been a few years.

There are body rendering differences between different browsers, but the code should be:

body {
    margin: 0;
    padding: 0;
}

Block-level elements always fill the available width for 100% unless otherwise ordered. However, I, too, would think that height: 100% is needed in this case.

 

[DesignsbyKR]

I'm having a little bit of a hard time grasping what you're looking for, but it sounds like you want a black bar across the top of the page and a black bar across the bottom of the page.

You'll run into problems if your content runs vertically outside of the viewport.

 

[chrishirst]

I'm having a little bit of a hard time grasping what you're looking for, but it sounds like you want a black bar across the top of the page and a black bar across the bottom of the page.

This was solved in post#4 by the way.