Make Footer stick to bottom using CSS
I would like to know how to make my footer stick to the bottom of the page. If there is a lot of content on the page, then it will be moved down to the bottom of it all. Currently my footer wants to stay horizontally in the center of my <Body> tag.
I have been doing research online for 5 hours and none of the solutions seem to be working for me.
Please help!
I have been doing research online for 5 hours and none of the solutions seem to be working for me.
Please help!
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
}
#footer {
position:absolute;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
Hi,
Try changing position:absolute; on the #footer style to position:relative;
Thanks,
John
Try changing position:absolute; on the #footer style to position:relative;
Thanks,
John
ASKER
Here is my HTML. If I set the footer to position:relative, then it jumps to the top of the page, and sits just below my <div = logo> tag.
<HTML>
<HEAD>
<TITLE>Registered Participants</TITLE>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</HEAD>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="rules.html" class="rules">Rules</a></li>
<li><a href="mainvote.vote" class="vote">Vote</a></li>
<li><a href="mainresults.php" class="results">Results</a></li>
<li><a href="mainprofile.php" class="profile">Profile</a></li>
<li class="last"><a href="contact_groups.html" class="contact">Contact</a></li>
<li class="logout"><a href="logout.php" class="">Logout</a></li>
</ul>
</div><!-- /#navbar -->
</div><!-- end header -->
<div id="logo">
<h1>American Idol Contest</h1>
<h2>Registered Participants</h2></p>
</div> <!-- end logo -->
<div id= "page">
<H3>Currenty there are <?php echo "$num" ?> participants registered - <i>sorted by user name </i></H3>
<?php echo "$display_block"; ?>
</div> <!-- end page -->
<div id="footer">
<P>
<a href="index.php" class="home">Home</a>|
<a href="rules.html" class="rules">Rules</a>|
<a href="mainvote.vote" class="vote">Vote</a>|
<a href="mainresults.php" class="results">Results</a>|
<a href="mainprofile.php" class="profile">Profile</a>|
<a href="contact_groups.html" class="contact">Contact</a></li><br><br>
<a href="mailto:americanidolvotes@gmail.com">americanidolvotes@gmail.com</a></P>
</div>
<!-- end footer -->
</BODY>
</div> <!-- end container -->
</HTML>
You need to move the </div> <!-- end container --> inside the BODY tag. That is not going to solve your problem, just correct an error.
I have tried running your HTML and CSS in Firefox and IE8 and it works perfectly with position: relative. What browser / version are you using to test?
I have tried running your HTML and CSS in Firefox and IE8 and it works perfectly with position: relative. What browser / version are you using to test?
Also, is that your full CSS and HTML. If not, please can you post everything?
ASKER
Here is all of my CSS. I gave you all of my HTML.
I originally had the container in the body tag but changed it in an effort to troubleshoot and forgot to put it back.
Right now I am testing in Safari and Firefox and both of them show the footer move up to the top of the page once I set the footer's position to relative. (which is where it is currently at).
Perhaps the positioning is conflicting with the positioning of some of the other div elements?
I originally had the container in the body tag but changed it in an effort to troubleshoot and forgot to put it back.
Right now I am testing in Safari and Firefox and both of them show the footer move up to the top of the page once I set the footer's position to relative. (which is where it is currently at).
Perhaps the positioning is conflicting with the positioning of some of the other div elements?
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
#navbar{
margin-bottom:0px;padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:50px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#navbar li a:hover{
color: #00000;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
float: left;
position: absolute;
top: 300px;
left: 90px;
width: 900px;
margin: 0 auto;
padding-top: 10px;
background: #FFFFFF;
border-top: none;
}
#rtbox {
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
text-align:center;
}
/* Footer */
#footer {
position:relative;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
Hi,
Thanks for the full CSS. I was able to replicate the problem.
Please try the CSS below. I have commented out float: left and changed position: absolute to position: relative on #page.
Is rtbox supposed to be the right column next to #page? If so, let me know and I will update your CSS and HTML so it will work because you will require float: left in #page.
Thanks,
John
Thanks for the full CSS. I was able to replicate the problem.
Please try the CSS below. I have commented out float: left and changed position: absolute to position: relative on #page.
Is rtbox supposed to be the right column next to #page? If so, let me know and I will update your CSS and HTML so it will work because you will require float: left in #page.
Thanks,
John
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
#navbar{
margin-bottom:0px;padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:50px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#navbar li a:hover{
color: #000000;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
/*float: left;*/
position: relative;
top: 300px;
left: 90px;
width: 900px;
margin: 0 auto;
padding-top: 10px;
background: #FFFFFF;
border-top: none;
}
#rtbox {
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
text-align:center;
}
/* Footer */
#footer {
position:relative;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
ASKER
Yes rtbox is supposed to be a column or box on the right side of #page.
ASKER
I just tried the code you provided above and unfortunately the footer is still at the top of the page.
See screen shot
footer.jpg
See screen shot
footer.jpg
ASKER
My apologies, I css file uploaded to the wrong location.
Okay, your change did make the footer go to the bottom of the page, but there is white space that is 120px high (due to the container bottom padding setting which is supposed to allow room for the footer).
Also, all of my contents in the body of the site (#page) are far down.
See screenshot.
footer.jpg
Okay, your change did make the footer go to the bottom of the page, but there is white space that is 120px high (due to the container bottom padding setting which is supposed to allow room for the footer).
Also, all of my contents in the body of the site (#page) are far down.
See screenshot.
footer.jpg
The big area of witespace is due to the top: 300px you have in #page. That was in your original CSS so I just left it :-) Just reduce or remove it if not required.
I am looking at the column issue for you now.
I am looking at the column issue for you now.
Please try the attached CSS & HTML
CSS
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
#navbar{
margin-bottom:0px;
padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:50px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#navbar li a:hover{
color: #000000;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
float: left;
position: relative;
display: inline;
left: 90px;
width: 900px;
margin: 0 auto;
padding-top: 10px;
background: #eeeeee;
border-top: none;
}
#rtbox {
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
text-align:center;
display: inline;
position: relative;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Footer */
#footer {
position:absolute;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
HTML
<html>
<head>
<title>Registered Participants</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="rules.html" class="rules">Rules</a></li>
<li><a href="mainvote.vote" class="vote">Vote</a></li>
<li><a href="mainresults.php" class="results">Results</a></li>
<li><a href="mainprofile.php" class="profile">Profile</a></li>
<li class="last"><a href="contact_groups.html" class="contact">Contact</a></li>
<li class="logout"><a href="logout.php" class="">Logout</a></li>
</ul>
</div><!-- /#navbar -->
</div><!-- end header -->
<div id="logo">
<h1>American Idol Contest</h1>
<h2>Registered Participants</h2>
</div> <!-- end logo -->
<div class="clearfix">
<div id="page">
<h3>Currenty there are <?php echo "$num" ?> participants registered - <i>sorted by user name </i></h3>
<?php echo "$display_block"; ?>
</div> <!-- end page -->
<div id="rtbox">
Some content<p />
Some content<p />
Some content<p />
Some content<p />
</div>
</div>
<div id="footer">
<p>
<a href="index.php" class="home">Home</a>|
<a href="rules.html" class="rules">Rules</a>|
<a href="mainvote.vote" class="vote">Vote</a>|
<a href="mainresults.php" class="results">Results</a>|
<a href="mainprofile.php" class="profile">Profile</a>|
<a href="contact_groups.html" class="contact">Contact</a></li><br><br>
<a href="mailto:americanidolvotes@gmail.com">americanidolvotes@gmail.com</a></P>
</div>
<!-- end footer -->
</div> <!-- end container -->
</body>
</html>
ASKER
Thank you! That works much better. It seems that your #clearfix class helped it. But what does this do exactly?
At first the footer was covering the bottom section of information from the body of the page, but I added a padding-bottom to the clear fix class and made it the same height of my footer and that fixed it.
However, the only problem I have now is that it looks as though my header is doubled. and there are thin white areas along both sides of my header and footer, which aren't that import to remove but if you know an easy fix of how to remove them, I would prefer it. But I definitely do need to get rid of the double header. Check out my screen shot. It definitely happened after you updated the CSS and not the HTML portion, but I can't pin point what in the CSS would cause this. Do you know?
dblheader.jpg
At first the footer was covering the bottom section of information from the body of the page, but I added a padding-bottom to the clear fix class and made it the same height of my footer and that fixed it.
However, the only problem I have now is that it looks as though my header is doubled. and there are thin white areas along both sides of my header and footer, which aren't that import to remove but if you know an easy fix of how to remove them, I would prefer it. But I definitely do need to get rid of the double header. Check out my screen shot. It definitely happened after you updated the CSS and not the HTML portion, but I can't pin point what in the CSS would cause this. Do you know?
dblheader.jpg
What browser are you using to view this?
ASKER
Both Firefox and Safari are doing it. I can't test in IE right now.
Ok, I am having a hard time replicating. Can you post background.gif and microphone.png?
Also, please can you post your full HTML and CSS code as it is now. I just created the background.gif from the screenshot you posted and it works fine for me.
ASKER
The microphone image has not been purchased yet so you can ignore the logo.
Here are my two images, as well as the full HTML (minus the PHP code) and CSS.
Thank you.
background.gif
Here are my two images, as well as the full HTML (minus the PHP code) and CSS.
Thank you.
background.gif
ASKER
Urgh..so sorry. I hit enter after typing the name for the image and it submitted my response.
Here are the rest of the files.
P.S. Please do not change any colors. Thank you.
Here are the rest of the files.
P.S. Please do not change any colors. Thank you.
CSS
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto;
height:100%; /* for ie6 and 5.5 */
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
#navbar{
margin-bottom:0px;
padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:50px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
float: left;
position: relative;
/*display: inline; */
left: 90px;
width: 700px;
padding-left: 15px;
padding-top: 10px;
background: #eeeeee;
border-top: none;
}
#rtbox {
margin-top: 20px;
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
min-height: 150px;
text-align:center;
vertical-align:middle;
display: inline;
position: relative;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
padding-bottom: 140px;
}
.clearfix {
display: inline-block;
}
/* Footer */
#footer {
position:absolute;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
<html>
<head>
<title>Registered Participants</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="welcome.php" class="home">Home</a></li>
<li><a href="rules.html" class="rules">Rules</a></li>
<li><a href="mainvote.vote" class="vote">Vote</a></li>
<li><a href="mainresults.php" class="results">Results</a></li>
<li><a href="show_modcontact.php" class="profile">Profile</a></li>
<li class="last"><a href="contact_groups.html" class="contact">Contact</a></li>
<li class="logout"><a href="logout.php" class="">Logout</a></li>
</ul>
</div><!-- /#navbar -->
</div><!-- end header -->
<div id="logo">
<h1>American Idol Contest</h1>
<h2>Registered Participants</h2>
</div> <!-- end logo -->
<div class="clearfix">
<div id="page">
<h3>Currenty there are <?php echo "$num" ?> participants registered - <i>sorted by user name </i></h3>
<?php echo "$display_block"; ?>
</div> <!-- end page -->
<div id="rtbox">
Some content<p />
Some content<p />
Some content<p />
Some content<p />
</div> <!-- end rtbox -->
</div> <!-- end clear fix -->
<div id="footer">
<p> <a href="welcome.php" class="home">Home</a>|
<a href="rules.html" class="rules">Rules</a>|
<a href="mainvote.vote" class="vote">Vote</a>|
<a href="mainresults.php" class="results">Results</a>|
<a href="show_modcontact.php" class="profile">Profile</a>|
<a href="contact_groups.html" class="contact">Contact</a></li><br><br>
<a href="mailto:americanidolvotes@gmail.com">americanidolvotes@gmail.com</a></P>
</div>
<!-- end footer -->
</div> <!-- end container -->
</body>
</html>
Hi,
I am using the images you uploaded and the code below and it works fine for me in Firefox (see attached image). I would suggest the issue you are having is due to a padding element somewhere. The problem is without being able to recreate it, I can't make changes :-(
What version of Firefox are you using? Can you try saving the attached code as separate filenames and running to see if it works? Let me know if not.
Thanks,
John
I am using the images you uploaded and the code below and it works fine for me in Firefox (see attached image). I would suggest the issue you are having is due to a padding element somewhere. The problem is without being able to recreate it, I can't make changes :-(
What version of Firefox are you using? Can you try saving the attached code as separate filenames and running to see if it works? Let me know if not.
Thanks,
John
CSS
* {
margin: 0;
padding: 0;
}
html, body {
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
#navbar{
margin-bottom:0px;
padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:47px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#navbar li a:hover{
color: #000000;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
float: left;
position: relative;
display: inline;
left: 90px;
width: 900px;
margin: 0 auto;
/*padding-top: 10px;*/
background: #ffffff;
border-top: none;
}
#rtbox {
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
text-align:center;
display: inline;
position: relative;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
padding-bottom: 140px;
}
.clearfix {
display: inline-block;
/*padding-bottom: 120px;*/
}
/* Footer */
#footer {
position:absolute;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
HTML
<html>
<head>
<title>Registered Participants</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="rules.html" class="rules">Rules</a></li>
<li><a href="mainvote.vote" class="vote">Vote</a></li>
<li><a href="mainresults.php" class="results">Results</a></li>
<li><a href="mainprofile.php" class="profile">Profile</a></li>
<li class="last"><a href="contact_groups.html" class="contact">Contact</a></li>
<li class="logout"><a href="logout.php" class="">Logout</a></li>
</ul>
</div><!-- /#navbar -->
</div><!-- end header -->
<div id="logo">
<h1>American Idol Contest</h1>
<h2>Registered Participants</h2>
</div> <!-- end logo -->
<div class="clearfix">
<div id="page">
<h3>Currenty there are <?php echo "$num" ?> participants registered - <i>sorted by user name </i></h3>
<?php echo "$display_block"; ?>
</div> <!-- end page -->
<div id="rtbox">
Some content<p />
Some content<p />
Some content<p />
Some content<p />
</div>
</div>
<div id="footer">
<p>
<a href="index.php" class="home">Home</a>|
<a href="rules.html" class="rules">Rules</a>|
<a href="mainvote.vote" class="vote">Vote</a>|
<a href="mainresults.php" class="results">Results</a>|
<a href="mainprofile.php" class="profile">Profile</a>|
<a href="contact_groups.html" class="contact">Contact</a></li><br><br>
<a href="mailto:americanidolvotes@gmail.com">americanidolvotes@gmail.com</a></P>
</div>
<!-- end footer -->
</div> <!-- end container -->
</body>
</html>
Hi,
Just a thought, try adding:
margin: 0;
padding: 0;
to your "html, body" style.
Thanks,
John
Just a thought, try adding:
margin: 0;
padding: 0;
to your "html, body" style.
Thanks,
John
Hi,
Sorry for the multiple posts. I checked your code in IE and it didn't look great so I have completely re-written the HTML and CSS for you. This renders perfectly (for me at least) in Firefox and IE.
Have a look and let me know what you think.
Thanks,
John
Sorry for the multiple posts. I checked your code in IE and it didn't look great so I have completely re-written the HTML and CSS for you. This renders perfectly (for me at least) in Firefox and IE.
Have a look and let me know what you think.
Thanks,
John
CSS
html, body {
margin:0;
padding:0;
background: url(../images/background.gif) repeat-x top left;
min-height:100%;
height:100%;
}
#container {
min-height: 100%;
position: relative;
height: auto !important;
padding: 0 auto -140px;
height:100%; /* for ie6 and 5.5 */
width: 100%;
}
#header {
position:relative;
height:300px;
width:100%;
}
body, th, td, input, textarea {
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #0024c5;
}
h1 {
font-size: 2.5em;
}
h2 {
text-transform: uppercase;
font-size: 1.75em;
font-weight: bold;
color: #0024c5;
}
h3 {
font-size: 1.25em;
color: #BD0A70;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #75043D;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #B10961;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #B10961;
}
hr {
display: none;
}
/* Navbar */
#navbar{
margin-bottom:0px;
padding:0px 18px 7px;
height: 40px;
width: 976px;
}
#navbar li{
float:left;
line-height:47px;
}
#navbar li a{
display:block;
padding:0 25px;
font-weight:bold;
color:#ffffff; /*font*/
}
#navbar li.separator{
padding-left:1px;
}
#navbar li a:hover{
color: #000000;
}
#header {
width: 900px;
margin: 0 auto 0px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navbar a {
display: block;
float: left;
/* padding: 0px 30px 17px 30px; */
/* letter-spacing: -1px; */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
border-left: #000000 1px solid;
color: #FFFFFF;
}
#navbar a:hover {
background: #BD0A70;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #770444;
padding: 15px 30px 16px 30px;
color: #FFFFFF;
}
#navbar .last{
border-right: #000000 1px solid;
}
#navbar .logout{
float:right;
border-right: #000000 1px solid;
}
/* Logo */
#logo {
width: 900px;
height: 255px;
margin: 0px auto;
background: url(../images/microphone.png) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0px;
}
#logo h1 {
padding: 60px 5px 0px 0px;
font-size: 48px;
color: #FFFFFF;
}
#logo h2 {
padding: 0px 0 0 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #BD0A70;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
#page{
background-color: #eeeeee;
float: left;
display: inline;
position: relative;
width:900px;
left: 90px;
margin: 0 auto;
border-top: none;
}
#rtbox {
float: right;
font-size: 1.5em;
color: #000000;
background-color:#fffaba;
width: 300px;
text-align:center;
display: inline;
position: absolute;
vertical-align: top;
}
#footer {
position:absolute;
bottom: 0;
background: #000000;
height: 120px;
padding-top: 20px;
width: 100%;
}
#footer p {
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
padding: 2px 7px;
color: #FFFFFF;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
padding-bottom: 140px;
}
.clearfix {
display: inline-block;
}
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>
<title>Registered Participants</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="rules.html" class="rules">Rules</a></li>
<li><a href="mainvote.vote" class="vote">Vote</a></li>
<li><a href="mainresults.php" class="results">Results</a></li>
<li><a href="mainprofile.php" class="profile">Profile</a></li>
<li class="last"><a href="contact_groups.html" class="contact">Contact</a></li>
<li class="logout"><a href="logout.php" class="">Logout</a></li>
</ul>
</div>
<div id="logo">
<h1>American Idol Contest</h1>
<h2>Registered Participants</h2>
</div>
</div>
<div class="clearfix">
<div id="page">
<h3>Currenty there are <?php echo "$num" ?> participants registered - <i>sorted by user name </i></h3>
<?php echo "$display_block"; ?>
</div>
<div id="rtbox">
Some content<p />
Some content<p />
Some content<p />
Some content<p />
</div>
</div>
<div id="footer">
<p>
<a href="index.php" class="home">Home</a>|
<a href="rules.html" class="rules">Rules</a>|
<a href="mainvote.vote" class="vote">Vote</a>|
<a href="mainresults.php" class="results">Results</a>|
<a href="mainprofile.php" class="profile">Profile</a>|
<a href="contact_groups.html" class="contact">Contact</a></li><br><br>
<a href="mailto:americanidolvotes@gmail.com">americanidolvotes@gmail.com</a></P>
</div>
</div>
</body>
</html>
ASKER
All this browser compatibility is driving me crazy.
That code may look beautiful in IE, but now it looks crazy in Safari and FF. The navbar is in the right position and the footer looks perfect, but everything else is off. I don't understand how people make everything look perfect in all the browsers!
Check out my screenshot.
body.jpg
That code may look beautiful in IE, but now it looks crazy in Safari and FF. The navbar is in the right position and the footer looks perfect, but everything else is off. I don't understand how people make everything look perfect in all the browsers!
Check out my screenshot.
body.jpg
You asked about what the clearfix class does...
Floated content has no height inside its container. I believe the reason for this is so that other content can start at the top of the container and wrap around the floated content.
The clearfix class creates content after the floated content (usually a period), sets its visibility to hidden and size to zero. So it's like creating an imaginary dot after the floated content that will force the container to expand to contain it.
Hope that helps the understanding.
Floated content has no height inside its container. I believe the reason for this is so that other content can start at the top of the container and wrap around the floated content.
The clearfix class creates content after the floated content (usually a period), sets its visibility to hidden and size to zero. So it's like creating an imaginary dot after the floated content that will force the container to expand to contain it.
Hope that helps the understanding.
Hi,
The code I posted in my last post works perfectly in Firefox and IE for me. Please see the attached screenshots. Please ensure that you are definitely referencing the correct CSS file.
Also, did you also try adding:
margin: 0;
padding: 0;
to the "html, body" style in your code?
Thanks,
John
screenshotff.gif
screenshotie7.gif
The code I posted in my last post works perfectly in Firefox and IE for me. Please see the attached screenshots. Please ensure that you are definitely referencing the correct CSS file.
Also, did you also try adding:
margin: 0;
padding: 0;
to the "html, body" style in your code?
Thanks,
John
screenshotff.gif
screenshotie7.gif
ASKER
Yes that does look perfect John. I will give it a look over when I get home tonight to ensure I am referencing everything correctly.
@Quaoar - Thank you for the explanation!!! It does help make sense of it. I like using this site to solve my technical problems, but I also like to understand how/why it got solved so I can apply it to future projects. :o)
@Quaoar - Thank you for the explanation!!! It does help make sense of it. I like using this site to solve my technical problems, but I also like to understand how/why it got solved so I can apply it to future projects. :o)
Ah, sorry, I missed the part about clearfix, although Quaour did an excellent job of explaining :-)
In the code I posted, the reference in the HTML is to css/common.css. If you have saved my code as common3.css (for example) you need to ensure you have updated the HTML with this new file reference. Otherwise the page will look really bad in any browser.
In the code I posted, the reference in the HTML is to css/common.css. If you have saved my code as common3.css (for example) you need to ensure you have updated the HTML with this new file reference. Otherwise the page will look really bad in any browser.
ASKER
I don't understand why, but the yellow box is not floating off to the right in my screens. In both FF and Safari, it shows along the left side (see screen shot). I ensured I was referencing the correct css files and I copied your code exactly as you posted it. Are you sure you didn't make any changes after you posted it the last time?
ff.jpg
ff.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
YAY!!! Thank you SO much for being dedicated to making it work all the way to the end. I really appreciate your persistence and patience. It looks perfect. Now I need to really study CSS so I can figure this sort of thing out on my own. The positioning always throws me off.
Can you post the html as well so I can recreate the issue?
Thanks,
John