Why is My HTML Footer Not Displaying Correctly?

  • HTML/CSS
  • 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.
 

FAQ: Why is My HTML Footer Not Displaying Correctly?

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.

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.

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.

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.

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

Replies
7
Views
1K
Replies
10
Views
1K
Replies
1
Views
2K
Replies
5
Views
591
Replies
5
Views
485
Replies
2
Views
1K
Replies
8
Views
1K
Replies
4
Views
1K
Replies
14
Views
2K
Replies
9
Views
2K
Back
Top