/    Sign up×
Community /Pin to ProfileBookmark

how to cover whole page header and footer!?

Copy linkTweet thisAlerts:
Feb 10.2011

Hello I am trying to make my site a little something like this one:

[url]http://www.immovarro.be/[/url]

notice how the header and footer are stretch through whole page and the info in the middle is just in the middle..How would could I make my header and footer like this in my site? Most of the time I just have a wrapper with all divs inside with 930px and everything fits inside of it perfectly but the only way i can think of doing this is setting the footer and header outside the wrapper div but i dont think that would be very clean and when i try to take wrapper div out every that floats in the page goes all over the place when i resize my page …any help would be great!!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@PBSWebDesignFeb 11.2011 — Try this:
[CODE]
div#header {
width: 100%;
}
div#footer {
width: 100%;
}

[/CODE]

this is what i do and then have the set page container inside for just the body and side colums(if any). Just set up all your design inside the new wrapper and leave the header and footer out if you are gonna limit the body and side colums with pixels. Percentages allow for a liquid layout. Pixels are for a static layout. Don't forget to set your height as well but you can use pixels for the height if you'd like. The percentages used for the width is what makes it stretch the full length of the page real estate.
Copy linkTweet thisAlerts:
@PBSWebDesignFeb 11.2011 — [CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Liquid Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"><h1>This is your Header!</h1></div>

<div id="pagecontainer">
<div id="maincontent">
<h3>This is a test page to make sure that the header and footer stay the length of the entire screen.</h3>

<p>This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!This is some text!</p>





</div>
</div>


<div id="footer"><h1>This is your footer!</h1>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>


<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>

</div>
</body>
</html>

[/CODE]

Ok this is the html that I drew up for a site with the middle content also expanding the whole page and being able to flow and be liquid with the rest of the site. copy and paste this into your text editor and save the file as "whatever name you want".html

Now below is the css that makes it all happen. Copy and paste this code into your editor and name it style.css its very important to name it that as that is what the html links to as the external stylesheet.

[CODE]
body {
margin: 0;
}
/*These define the divs used in the layout*/
div#header {
width: 100&#37;;
height: 150px;
background-color: black;
margin-bottom: 5px;
color: white;
}
div#pagecontainer {
width: 100%;
height: auto;
margin: 0;
}
div#maincontent {
color: black;
background-color: green;
font-family: Arial, Verdana, Sans-Serif;
font-size: 14px;
}
div#footer {
width: 100%;
height: auto;
margin-top: 10px;
background-color: blue;
}

/*This is just to center my <h1> tags*/

h1 {
text-align: center;
}
[/CODE]


Once you have this done pull up the html document i created and play around with the window sizes and see how it works ? I hope this helps you out.
Copy linkTweet thisAlerts:
@PBSWebDesignFeb 11.2011 — Also you can add a side bar or two if you'd like into the html document to create a 2 column or 3 column liquid css layout. Just make sure to float both divs i.e. float the sidebar 1 div and the maincontent div both to the left and make the footer clear: both so that it doesnt mess up the layout later if the screen is much smaller. Tweak it a bit and play around with it and youll figure it out. Its pretty simple to do ?
×

Success!

Help @repeater09 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...