Jump to content
Sign in to follow this  
Ryan

How to move this footer down

Recommended Posts

Site: http://rterry.sasktelwebsite.net/How would I make this footer appear seperated and moved down a little from the 3 columns above it. I want a space between like the one existing between the navigation div and 3 columns.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"><head><title>Cosmic Spice</title><link rel="stylesheet" type="text/css" href="style.css" /></head><br><body><div id="wrapper">   <div id="header"><img src="logo.jpg"></div><div id="navbar"><a href="index.html">Home</a> |</div> <br><div id="leftcolumn"><a href="documents.html">Documents</a> |</div><div id="centercolumn"></div><div id="rightcolumn"><a href="http://www.shroomery.org" title="Hallucinogenic Magic Mushroom Information"><img name="Magic Mushrooms - Shroomery" border="0" src="http://www.shroomery.org/banner/magic-mushrooms-shroomery-button.png" alt="Magic Mushrooms Shroomery"></a></div><br><div id="footer">footer</div></div></body></html>

CSS:

h3 {font-family: arial}p {font-family: arial;  font-size: 120%;}a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #FFFFFF}a:active {color: #FFFFFF}* { padding: 0; margin: 0;}body { color: #FFFFFF; font-size: 16px; background-color: #CCCCCC;}#wrapper { width: 1000px; margin: 0 auto;}#header { border: 1px solid #ccc; margin: 0px; height: 100px; padding: 10px; background-color: #000000; font-size: 16px;   color: #CC9966;}#navbar { border: 1px solid #ccc; margin: 0 auto; padding: 6px; background-color: #000000; font-size: 16px; color: #FFFFFF;}#leftcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: left; border: 1px solid #ccc; min-height: 300px;  background-color: #000000; font-size: 16px;}* html #leftcolumn {height:300px} /* IE Min-Height Hack */ #centercolumn { border: 1px solid #ccc; margin: 0 auto; display: inline; /* IE Hack */ padding: 4px; width: 670px; float: left; min-height: 300px; background-color: #000000;}* html #centercolumn {height:300px} /* IE Min-Height Hack */ #rightcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: right; border: 1px solid #ccc; background-color: #000000; min-height: 300px;  font-size: 14px;}#footer { border: 1px solid #ccc; margin: 0px; padding: 4px; background-color: #000000; font-size: 16px;   color: #FFFFFF;}

Share this post


Link to post
Share on other sites

in my browser (Safari) your footer is on bottom.i supose that you want a white space between your three middle bars. to do this you just have to define a footer margin like

#footer {border: 1px solid #ccc;margin: 20px 0 0 0;padding: 4px;background-color: #000000;font-size: 16px;  color: #FFFFFF;}

if you want to put your footer in the bottom of the page set position to absolute and bottom to 0.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...