Hi,
Say I have a footer that I want to display contact info on the left, and site credit info on the right. What is the best way to do this?
<div id="footer">
<div id="contact">Phone: 555-1234</div>
<div id="credits">Site by: ACME Inc.</div>
</div>
#footer {
margin: 0 auto;
text-align: left;
width: 780px;
clear:both;
}
#contact {
float:left;
}
#credits {
right:0px;
}
This is what I have tried, but the content appears at on the left of the footer div.
Thanks.Make the width of the div 100%, or the width of the rest of the site, if it's hard codedEven if the footer was narrower than the rest of the page, the clear: both; would prevent floated elements from appearing on either side of the footer. I guess I'm not sure what you mean by "content" when it is beside the footer. Can we see all the HTML and CSS? There could be something further up the page that's causing this.
EDIT: Also, what browser, version, and OS are you using?Sorry, I'm on WinXP and am using IE6 and FF1.
By content, I mean the content of the footer (the content held by the #content and #credits divs)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<title>Sylvie ~ An Electric Trace</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
width: 780px;
}
#flash {
background-image:url(images/border.gif);
left:20px;
top:10px;
padding:11px 10px 10px 9px;
}
#footer {
margin: 0 auto;
text-align: left;
width: 780px;
clear:both;
}
#contact {
float:left;
}
#credits {
right:0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="container">
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="760" height="470" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="shell.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"shell.swf" quality="high" bgcolor="#ffffff" width="760" height="470" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div id="footer">
<div id="contact">Contact: Joel Smith | 123.555.1234</div>
<div id="credits">Site by: Stephen Peasley</div>
</div>
</body>
</html>This is what I have tried, but the content appears at on the left of the footer div.
This reads a little weird... it's confusing. What I meant is that the footer content appears left-aligned within the div.
Thanks again.Okay, I got it.
I just needed to add float:right; to the #credits div.
Thanks.<style type="text/css">
#footer {
width:760px;
}
#contact {
float:left;
}
#credits {
float:right;
}</style>
</head>
<body>
<div id="footer"><span id="contact">contact</span><span id="credits">credits</span></div>
</body>
</html><style type="text/css">
#footer {
width:760px;
}
#contact {
float:left;
}
#credits {
float:right;
}</style>
</head>
<body>
<div id="footer"><span id="contact">contact</span><span id="credits">credits</span></div>
</body>
</html>
It might be better not to float the #contact span. You might want the footer to have some kind of background or something. You won't get it if all the content is floated (at least not in good browsers).
Say I have a footer that I want to display contact info on the left, and site credit info on the right. What is the best way to do this?
<div id="footer">
<div id="contact">Phone: 555-1234</div>
<div id="credits">Site by: ACME Inc.</div>
</div>
#footer {
margin: 0 auto;
text-align: left;
width: 780px;
clear:both;
}
#contact {
float:left;
}
#credits {
right:0px;
}
This is what I have tried, but the content appears at on the left of the footer div.
Thanks.Make the width of the div 100%, or the width of the rest of the site, if it's hard codedEven if the footer was narrower than the rest of the page, the clear: both; would prevent floated elements from appearing on either side of the footer. I guess I'm not sure what you mean by "content" when it is beside the footer. Can we see all the HTML and CSS? There could be something further up the page that's causing this.
EDIT: Also, what browser, version, and OS are you using?Sorry, I'm on WinXP and am using IE6 and FF1.
By content, I mean the content of the footer (the content held by the #content and #credits divs)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<title>Sylvie ~ An Electric Trace</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
width: 780px;
}
#flash {
background-image:url(images/border.gif);
left:20px;
top:10px;
padding:11px 10px 10px 9px;
}
#footer {
margin: 0 auto;
text-align: left;
width: 780px;
clear:both;
}
#contact {
float:left;
}
#credits {
right:0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="container">
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="760" height="470" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="shell.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"shell.swf" quality="high" bgcolor="#ffffff" width="760" height="470" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div id="footer">
<div id="contact">Contact: Joel Smith | 123.555.1234</div>
<div id="credits">Site by: Stephen Peasley</div>
</div>
</body>
</html>This is what I have tried, but the content appears at on the left of the footer div.
This reads a little weird... it's confusing. What I meant is that the footer content appears left-aligned within the div.
Thanks again.Okay, I got it.
I just needed to add float:right; to the #credits div.
Thanks.<style type="text/css">
#footer {
width:760px;
}
#contact {
float:left;
}
#credits {
float:right;
}</style>
</head>
<body>
<div id="footer"><span id="contact">contact</span><span id="credits">credits</span></div>
</body>
</html><style type="text/css">
#footer {
width:760px;
}
#contact {
float:left;
}
#credits {
float:right;
}</style>
</head>
<body>
<div id="footer"><span id="contact">contact</span><span id="credits">credits</span></div>
</body>
</html>
It might be better not to float the #contact span. You might want the footer to have some kind of background or something. You won't get it if all the content is floated (at least not in good browsers).