PDA

View Full Version : Need some help with CSS (footer at bottom an two full height columns)



Lifescream
Oct 22nd, 2008, 06:23 PM
I hope some of you can help me.

I need the following lay-out:
- a header (at the top of course)
- a footer that stay at the bottom when the content is smaller than the browser window
- two columns (full height beacuse of background colours in the navigation) in the body div, one for navigation and one for content.
- and it has to be IE (6/7) and Firefox compatible

I have the part where the footer stays at the bottom in Firefox and IE, but I am at loss how to add the two columns next to each other and get the to full height of the window.

This my code:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Volledig scherm gebruiken</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}

#navigation
{
/* ????? */
}

#content
{
/* ????? */
}

</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>

<body>
<div id="container">
<div id="header" >
Header
</div>

<div id="body">
<div id="navigation">
Navigation
</div>
<div id="content">
Content
</div>
</div>

<div id="footer">
footer
</div>
</div>
</form>

</body>
</html>



I am looking for a solution without any javascript.

I hope you guys can help me.

Thx a lot !!

Shoot2Kill
Oct 22nd, 2008, 07:19 PM
Hope this helps...

HTML


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Blah</title>
</head>

<body>
<div id="container">
<div id="header">
<h1>Title</h1>
</div>
<div id="navbar">
links<br />
links<br />
links<br />
links<br />
links<br />
links<br />
links<br />
links<br />
links<br />
</div>
<div id="body">
<p>
blahhhhhhhhh
</p>
</div>
<div id="footer">
FOOTER BLAHHHH
</div>
</div>
</body>
</html>



CSS


body
{
font-size: 75&#37;;
font-family: Calibri, Helvetica, sans-serif;
}

#container
{
width:800px;
margin: 0 auto;
background: #a6a6a6;
}

#header
{
width: 100%;
}

#navbar
{
width: 20%;
float: left;
}

#body
{
width: 80%;
float: right;
}

#footer
{
width: 100%;
clear: both;
}

Lifescream
Oct 22nd, 2008, 07:30 PM
Thx for the quick reply.

It is not however what I was looking for. Try the code that I already have and you will see that the footer stays at the bottom when there is enough content to fill the entire page (a height of 100%) and that it scroll down if there is more content than the browser window. I also need to use the entire width of the screen.

I think the basic code is ok, I just need the add the two columns that have a height of 100% but I can't seem to get that to work....

Shoot2Kill
Oct 22nd, 2008, 07:43 PM
like this ????



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Volledig scherm gebruiken</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100&#37;;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}

#navigation
{
width: 20%;
float: left;
background: #afafaf;
}

#content
{
width:80%;
float: right;
background: #a797a7;
}

</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>

<body>
<div id="container">
<div id="header" >
Header
</div>

<div id="body">
<div id="navigation">
Navigation<br />
Navigation<br />
Navigation<br />
Navigation<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</div>

<div id="footer">
footer
</div>
</div>

</body>
</html>


NOTE: only added background colour to see div layouts.

Lifescream
Oct 22nd, 2008, 08:02 PM
thx again :)


well almost there: three small problems left:
- the columns (navigation and content) aren't height:100%
- the footer doesn't show below the navigation bar in IE 7.
- the footer content goes below the footer

take a look: http://www.blackstar.be/temp/firefox.jpg

It' s a hard nut to crack. This is as close I have been able to get once.

BoldUlysses
Oct 22nd, 2008, 09:26 PM
How about this? Link here. (http://www.sufferndesign.com/helping/site86.html) This is the "faux columns method" (http://www.alistapart.com/articles/fauxcolumns/) with the CSS sticky footer (http://ryanfait.com/sticky-footer/) thrown in for good measure.

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" xml:lang="en">
<head>

<title>Layout 86</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

* {
margin: 0;
}

html, body {
height: 100&#37;;
}

body {
font-family:arial, verdana, sans-serif;
background:url("bg3.gif") top left repeat-y;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-60px; /* the bottom margin is the negative value of the footer's height */
}

.header, .wrapper p {
background:#ccc;
}

.footer, .push {
height: 60px; /* .push must be the same height as .footer */
}

.footer {
background:#eee;
}

#navigation {
width:200px;
background:#0f0;
float:left;
}

#content {
background:#0ff;
}

</style>

</head>
<body>

<div class="wrapper">

<div class="header">
<h1>Layout 86</h1>
</div>

<div id="navigation">Navigation goes here.</div>

<div id="content">Content goes here.</div>

<div class="push"></div>

</div>

<div class="footer">
<p>Footer goes here.</p>
</div>

</body>
</html>

Lifescream
Oct 22nd, 2008, 10:58 PM
Thx for the lay-out!

the only problem is that if you give the columns a background, this background-color doens't go whole the way down to the footer, just till the end of the content. Can this be done ?

BoldUlysses
Oct 22nd, 2008, 11:07 PM
Simply? No. The faux column method applies the background image, tiled vertically, to the body element (or a container or wrapper if you use one). As explained in the article (http://www.alistapart.com/articles/fauxcolumns/), the background image "becomes the columns," and the real column divs sit on top, with transparent backgrounds to give the illusion that they flow all the way to the bottom of the page.

It's simple; it works; it's semantic, standards-compliant and cross-browser friendly. What more could you want? :)

effpeetee
Oct 23rd, 2008, 04:35 PM
I'm not sure what you want, but does this program (http://exitfegs.co.uk/Sources.html)do what you are after? It uses a javascript to keep the columns level. You could put a footer underneath.

Also look here (http://bonrouge.com/br.php?page=fixH).
And here. (http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm)

But I have to agree with friend msuffern.


Frank