Forum Moderators: not2easy
This is my first post at Webmaster World and I'm very excited to have found this forum! Also, in advance, I would like to apologize for long paragraphs of code..
The problem I am having is that I want a site that basically looks like this:
0011111000
0022222000
0033344000
0055555000
1: Header
2: Navigation bar
3: Main content
4: Sidebar
5: Footer
The footer should always be at the very bottom of the page, no matter if the text in 3 forces scrollbars. I have managed this in Explorer, but would never consider settling until it supports my beloved Firefox. It looks like this:
<style type="text/css">
html, body {
margin:0;
padding:0;
height: 100%;
max-height: 100%;
}
#wrapper {
position: relative;
width:752px;
padding-left: 40px;
height:auto!important;
height:100%;
min-height:100%;
}
#header {
background-color: #FFFF99;
}
#nav {
background-color: #6699FF;
}
#content-wrapper {
padding-bottom: 35px;
}
#sidebar {
background-color: #00FFFF;
float: right;
width: 210px;
}
#content {
background-color: #CCCCCC;
float: left;
margin-left: 10px;
width: 520px;
}
#footer {
clear: both;
background-color: #CCFFCC;
position:absolute;
bottom: 0px;
width: 752px;
height: 31px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="nav">
Nav
</div>
<div id="content-wrapper">
<div id="content">
<p>Lorem ipsum.....</p>
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
Footer
</div>
</div>
I have another version which works in both browsers once the page is longer than the viewport.
<style type="text/css">
body, html {
margin:0;
padding:0;
}
body {
min-width:752px;
}
#wrapper {
margin-left: 50px;
width:752px;
}
#header {
background-color: #FFFF99;
}
#nav {
background-color: #6699FF;
}
#main {
background-color: #CCCCCC;
float:left;
width:500px;
}
#sidebar {
float:right;
width:240px;
background-color: #00FFFF;
}
#footer {
background-color: #CCFFCC;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="nav">
Nav
</div>
<div id="main">
<p>Lorem ipsum....</p>
</div>
<div id="sidebar">
Sidebar
</div>
<div id="footer">
Footer
</div>
</div>
I have googled the web for this problem, but haven't found a satisfying solution. Hope someone can help out!
Best regards,
Erik Brännström
EDIT: What a loser I am.. Didn't even state my problem. In Firefox the first version just displays the footer at the bottom of the viewport even if there's text there. This does not however happen with Explorer. I am using version 2 of FF and 7 of IE.
I don't really get why, but it seems to work fine now. The footer is at the bottom of the viewport unless the content is longer. If so, the footer is at the end of the content. This is just a fix for FF, however it doesn't mess anything up for IE so I'm good.
Hope this helps someone else!
Best regards,
Erik Brännström
It's IE that's wrong. Even if you like that effect better.
