Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 228
  • Last Modified:

HTML Newbie question

Hi,

I am about to update a very old, very basic HTML website, which gives me the perfect opportunity to learn HTML5.  I have been on to the W3C website and ended up with a very basic template that is almost perfect.  However, I need to have the Footer fixed to the bottom of the screen/page and 0 border on the top.

I'd really appreciate it if someone could take a look at the code, and let me know (the right way) to do it.

Thank you.

<!DOCTYPE html>
 <html>
 <body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
 <b>Menu</b><br>
 HTML<br>
 CSS<br>
 JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
 Content goes here</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
 Footer to be at the bottom of the screen</div>
 
</div>
 
</body>
 </html> 

Open in new window

0
Andy Brown
Asked:
Andy Brown
1 Solution
 
Element1910Commented:
Footer:
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width: 100%; margin: 0%; position: fixed; bottom: 0%; border-top-width: 0px;">
 Footer to be at the bottom of the screen</div>

Open in new window

0
 
Andy BrownDeveloperAuthor Commented:
Thank you so much - that's a big help (which is a little worrying :)
0
 
Dave BaldwinFixer of ProblemsCommented:
The next thing is to move the styles from 'inline' to a 'style section in the <head> which you also don't have.  An empty or non-existent head section will fail validation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 page</title>
<style type="text/css">
#container {width:500px}
#header {background-color:#FFA500;}
#menu {background-color:#FFD700;height:200px;width:100px;float:left;}
#content {background-color:#EEEEEE;height:200px;width:400px;float:left;}
#footer {background-color:#FFA500;clear:both;text-align:center; width: 100%; margin: 0%; position: fixed; bottom: 0%; border-top-width: 0px;}
</style>
</head>
<body>
 
<div id="container">
 
<div id="header"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
 
<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content">Content goes here</div>
 
<div id="footer">Footer to be at the bottom of the screen</div>
                                            
</div>
 
</body>
 </html> 

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now