Why is My HTML Footer Not Displaying Correctly?

  • Thread starter camel-man
  • Start date
  • Tags
    Html
In summary, the conversation is about a problem with the footer in a HTML file, and the person is asking for suggestions on how to fix it. The person also shares the CSS code for reference. The expert suggests checking the data type and provides a resource on legal values for the "float" property.
  • #1
camel-man
76
0
Not sure why my footer is not working correctly in my file, anyone see what is wrong?

Code:
<html>
<head>
<title> Layout with Divs </title>
<link href="divstyle.css" rel="stylesheet" type="text/css" /> 
</head>


<body>

<div id="outer">
<div id="bannerbox"> Banner </div>
<div id="hyperlink"> Hyperlink </div>
<div id="content"> Content </div>
<div id="footer"> Footer </div>
</div>

</body>
</html


*****~And this is my css~*****

body{
background-color: #424242;
margin-top: 0;
padding-bottom: 60px;

}

div{
border: 1px solid black;
}

#outer{ 
border: 1px dotted #ee0bbb;
width: 603px;
margin-left: 140px;
background-color: white;
height: 800px;
postion: relative;
}

#bannerbox{ 
width: 480px;
height: 70px;
margin-left: 53px;
margin-top: 5px;
} 

#hyperlink{
width: 150px;
height: 200px;
margin-top: 40px;
margin-left: 10px;
float: left;

}

#content{
width: 350px;
height: 400px;
margin-top: 40px;
margin-right: 10px;
float: right;
}

#footer {
width: 50px;
height: 40px;
margin-top: 40px;
margin-right: 10px;
float: bottom;
}
 
Technology news on Phys.org
  • #3
What do you suggest I change it to? Should i change the data type ?
 
  • #5


I would recommend checking the position property of the footer in your CSS code. It seems like there may be a typo in the "position" property, as it is spelled as "postion". This could be causing the footer to not display correctly. Additionally, double check the float property and make sure it is set to "bottom" instead of "float: bottom". If these changes do not fix the issue, it may be helpful to provide more specific details or share a link to the code for further troubleshooting.
 

1. How do I center my footer in HTML?

To center your footer in HTML, you can use the CSS text-align: center; property on the footer element.

2. How can I change the font size of my footer in HTML?

You can change the font size of your footer in HTML by using the CSS font-size property on the footer element and specifying the desired font size.

3. Why is my footer not showing up on my webpage?

There could be a few reasons why your footer is not showing up on your webpage. Firstly, make sure that you have included the footer element in your HTML code. Secondly, check if there are any CSS properties or styles that are hiding the footer. Lastly, ensure that the footer is not positioned outside of the visible area of the webpage.

4. How do I make my footer stick to the bottom of the page?

You can make your footer stick to the bottom of the page by using CSS positioning properties such as position: fixed; or position: absolute;. You may also need to adjust the top, bottom, left, or right values to position the footer correctly.

5. Can I have multiple footers on my webpage?

Yes, you can have multiple footers on your webpage by including multiple footer elements in your HTML code. However, it is recommended to use only one footer for simplicity and consistency in design.

Similar threads

  • Programming and Computer Science
Replies
7
Views
1K
  • Programming and Computer Science
Replies
4
Views
1K
  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
2
Views
873
  • Programming and Computer Science
Replies
9
Views
4K
  • Programming and Computer Science
Replies
9
Views
3K
  • Programming and Computer Science
Replies
3
Views
2K
  • Computing and Technology
Replies
3
Views
2K
  • Programming and Computer Science
Replies
1
Views
3K
  • Programming and Computer Science
Replies
13
Views
1K
Back
Top