Header and Footer Css

Question

I have researching on web page dimensions and i have since settled on grid 960px. However i don't understand one thing on headers and footers.Take for instance stackoverflow's header that houses the username | logout | chat | meta | about | faq and the search box.It runs end to end of the browser.How can i make my header run end to end in css?.

Thanks.

you could check the header of stackoverflow with firebug :) so you can see how it is done. — BvdVen, Jan 17 '11 at 10:25
Life was like this: http://www2.warnerbros.com/spacejam/movie/jam.htm — benhowdle89, Jan 17 '11 at 10:44

score 2 · Accepted Answer · answered Jan 17 '11 at 10:27

2

In your css:

#header {
height: 100px;
width: 100%;
background-color: red;
}
#middle {
width: 960px;
margin: auto;
background-color: blue;
}
#footer {
width: 100%;
height: 100px;
background-color: green;
}

This is just the relevant bits, not the entire CSS code :)

answered Jan 17 '11 at 10:27

benhowdle89

36,900
69
202
331

1

Hi ben,i followed your example and googled width: 100px and i was lucky to nail what i was exactly after.http://www.cssgirl.com/resources/2008/06/07/create-full-width-header-footer-with-centered-content-using-css/ – Gandalf Jan 17 '11 at 10:55
You did mean width: 100%, not width: 100px didnt you? – benhowdle89 Jan 17 '11 at 10:56

score 0 · Answer 2 · answered Jan 17 '11 at 10:27

960.gs is just a "blueprint" to work from. Probably better to learn the basics before you dive in to a grid based system.

SO just uses a negative margin:

#custom-header {
    background-color: #EEE;
    height: 31px;
    margin-bottom: -31px;
}

before a <div id="header"></div>, which is a 960px wide centered div.

score 0 · Answer 3 · edited Apr 12 '19 at 10:27

0

Try This

@media print {
    @page {
        margin-top:0;
        margin-bottom:0;
        margin-top:initial;
    }
}

edited Apr 12 '19 at 10:27

HD..

1,456
3
28
48

answered Apr 12 '19 at 08:44

Gaurav Palaspagar

1

Header and Footer Css

3 Answers3

Try This