Html Question posted in
Some basic documentation can be found here.

Html – Footer is shown in content

    <div id="content">
        <div id="main">
            <div id="text">
                <div id="hw_container">
                    <p id="p1">Hello</p>
                    <p id="p2">&nbspWorld!</p>
                </div>
                <h1 id="im">I'm something</h1>
                <div id="typewriter_container">
                    <h1 id="typewriter"></h1>
                </div>
                <a href="#" id="something">something</a>
            </div>
            <div id="something"><img src="something"div>
        </div>
    </div>
    <div id="footer">
        <div id="nav">
            <a href="something" id="contact"></a>
            <ul>
                <li><a id="selected">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
            </ul>
            <div id="something"></div>
        </div>
    </div>

Here is the part of code, and when im running my code, its showing my footer IN the content block. I don’t know why. Stack overflow is blocking my screenshots, but i’ll still upload one: https://prnt.sc/u8KxH_ZZuUZ8

So i tried reloading my code, vs code, browser and pc. I also tried rewriting code and running it in another browser. Nothing helps.

Tags:

2

Answers


  1. 0

    Try the code given below:

    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  #content {
    flex: 1;
  }

  #footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>

<div id="content">
    <div id="main">
        <div id="text">
            <div id="hw_container">
                <p id="p1">Hello</p>
                <p id="p2">&nbspWorld!</p>
            </div>
            <h1 id="im">I'm something</h1>
            <div id="typewriter_container">
                <h1 id="typewriter"></h1>
            </div>
            <a href="#" id="something">something</a>
        </div>
        <div id="something"><img src="something" /></div>
    </div>
</div>

<div id="footer">
    <div id="nav">
        <a href="something" id="contact">Contact</a>
        <ul>
            <li><a id="selected">something</a></li>
            <li><a href="#">something</a></li>
            <li><a href="#">something</a></li>
        </ul>
        <div id="something"></div>
    </div>
</div>

</body>
</html>

    hope it helps:)

    Login or Signup to reply.
  2. 0

    It is good to use semantics when working with HTML, for your case you would have used:

    <header></header>
<main></main>
<footer></footer>

    always make sure not to include the footer inside the main tag.

    With this approach to have the footer at the bottom and help by default, you can use the display grid as in the snippet, I’ve written below

    body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

    I hope this helps or you can just modify your code by moving the #footer out of the #content div. With the approach I shared, it is not a must for the CSS to be written under the body tag but on the parent container.

    I hope this helps, Happy Coding Happy Hacking👩🏻‍💻🦾💡

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search