Ryan Posted August 29, 2006 Share Posted August 29, 2006 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;} Link to comment Share on other sites More sharing options...
[Coyot3] Posted August 29, 2006 Share Posted August 29, 2006 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now