Home/ Questions/Q 8617575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:53:36+00:00

This is the HTML structure I have <html> <head> <style></style> <title></title> </head> <header></header> <nav></nav>

  • 0

This is the HTML structure I have

<html>
   <head>
      <style></style>
      <title></title>
   </head>
   <header></header>
   <nav></nav>
   <body></body>
   <footer></footer>
</html>

And this is the style

html{
    height:99%;
    width: 99%;
    position:absolute;} 

header{
    position:absolute;
    top:0%;     left:0%;
    width:100%; height:7%;}

nav{
    position:absolute;
    top:7%;    left:0%;
    width:10%; height:85%;}

body{
    position:absolute;
    top:0%;    left:0%;
    width:90%; height:90%;}

footer{
    position:absolute;
    top:100%;  left:0%;
    height:5%; width:100%;}

I did have borders and background colors to identify elements on page, but omitted for brevity.

I want it to look like below, with every element being set (positioned) relative to the html tag. But when I position the body, all the other things move with it. Even though they are not children of the tag.

 ------------------------------
|           Header            |
|¯¯¯¯|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|    |                        |
|Nav |                        |
|    |       Body             |
|    |                        |
|____|________________________|
|            Footer           |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The <html> element may only contain <head> and <body> elements*:

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

    All elements used for presentation belong within the <body> element:

    <!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <header>
      <h1>Example</h1>
    </header>
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <footer>
      <address>
        Some location
      </address>
    </footer>
  </body>
</html>

    The reason everything is moving relative to the <body> element, is that an implicit <body> element is being created immediately after your <head> element to contain the structural elements.

    * assuming HTML5

    • 0