CODEWITHSUNDEEP
css960.gs
Gandalf
Gandalf

Reputation: 13683

Header and Footer Css

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.

Upvotes: 2

Views: 1608

Answers (3)

Gaurav Palaspagar
Gaurav Palaspagar

Reputation: 1

Try This

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

Upvotes: 0

Ross
Ross

Reputation: 17967

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.

Upvotes: 0

benhowdle89
benhowdle89

Reputation: 37454

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 :)

Upvotes: 2

Related Questions