Home/ Questions/Q 6894531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:47:40+00:00

I’ve never dealt with CSS but now I have to. I’m developing some HTML

  • 0

I’ve never dealt with CSS but now I have to. I’m developing some HTML code – a sketch of a website and have a problem with CSS. I would like to have my header in a fixed position, I mean it always should be on the top of the site, even if there is so much content that site has to be scrolled to see everything. I’ve tried somethig, but it does not work properly.

HTML:

    body {
        margin: 0px 0px 0px 0px;
    }

    header {
        border: 2px solid red;
        position: fixed;
        width: 100%;
    }

    #top-menu-bar {
        border: 1px dashed red;
        padding: 15px;
        text-align: right;
    }

    #main-menu-bar {
        border: 1px dashed red;
        padding: 15px;
    }

    #logo-bar {
        border: 1px dashed red;
        padding: 35px;
    }

    #content {
        border: 2px solid black;
    }

    footer {
        border: 2px solid blue;
        padding: 15px;
    }
 <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
      </head>
      <body>
        <header>
          <div id="top-menu-bar">
        	Login &nbsp; | &nbsp; Registration
          </div>
          <div id="logo-bar">
        	LOGO
          </div>
          <div id="main-menu-bar">
                MenuItem1 &nbsp; | &nbsp; MenuItem3 &nbsp; | &nbsp; MenuItem3
          </div>
        </header>
        <div id="content">
          <h1>
            Content
          </h1>
          <p>
            Some content<br/>
          </p>
        </div>
        <footer>
	      Footer
        </footer>
      </body>
    </html>

if you still do not get it what I mean, here I provide links with fixed, witout fixed

Of course, what I’m looking for is nice a solution, without unnecessary code (even CSS and JS). It is important to note that no one element, especially header has not fixed height!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:

    top: 0px;

    Then, with div#content, give it a top margin to push it down out of the header’s way:

    margin-top: 200px;

    So your CSS ends up looking like this:

    header {
    border: 2px solid red;
    position: fixed;
    width: 100%;
    top: 0px;
}

#content {
    border: 2px solid black;
    margin-top: 200px;
}
    • 0