position absolute html and css problems

Question

I want to have a menu on a fixed position, even when I scroll, etc.

I used "position: absolute;" (also tried :fixed;). Both had the same error.
(I had to set up "left/right/top: 0%", because I had a bit of freespace on each side.)

I wanted to continue with the next div, which is outside of #headercontainer, but I got a problem there. The next div doesn't start "under" the menu, but on the same position.
In short, these 2 divs overlap each other.

I could fix that with margin... but I think I did something wrong! Since the next div part also needed the left/right 0% and also a position alignment or I would have got these free spaces on both sides again.

HTML:

<body>
  <div id="headercontainer">
    <div id="logo">
      <a href="">
        <img src="images/logo/logo.png" id="headlogo" />
      </a>
      <h1>Robert</h1>
    </div>

    <nav role="navigation" class="navigation">
      <ul>
        <li> <a href=""> ABOUT ME </a></li>
        <li> <a href=""> SKILLS </a></li>
        <li> <a href=""> WORK </a></li>
        <li> <a href=""> CONTACT </a></li>
      </ul>
    </nav>
  </div>
</body>

CSS:

#headercontainer{
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}

if you want your menu to be in the same place, why not use position:fixed; ? — Keith, Jul 24 '13 at 16:58
Thanks for answer. I also tried "position: fixed". But the next
still starts on the "#headercontainer". What Iam looking for is that the next
(body) with its content starts after the "#heardercontainer div" (under it) without using margin ... since it should work like that w/o problems. Thats why I think I have a problem with the "position" but I cant find it. — , Jul 24 '13 at 17:07
Can you put this in a jsfiddle.net so we can try see what the issue is. — designtocode, Jul 24 '13 at 17:25
You should read these: http://stackoverflow.com/questions/10975268/position-fixed-header-in-html, http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/, http://www.htmlgoodies.com/beyond/css/article.php/3872271/CSS-Basics-for-Web-Developers-Positioning.htm — Joe_G, Jul 24 '13 at 17:31

Simon Arnold · Answer 1 · 2015-01-29T21:39:08.577

1

Try using position: relative; with margin: 0; and padding: 0;
If it's not working, it means that the spaces on both sides comes from the parent <div>.

#headercontainer{
  position: relative;
  float: left;
  width: 100%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  margin: 0;
  padding: 0;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}

edited Jan 29 '15 at 21:39

answered Jul 24 '13 at 17:35

Simon Arnold

15,849
7
67
85

score 1 · Accepted Answer · answered Jul 24 '13 at 17:54

The extra space on the top and sides is likely due to default padding/margin on the body. Make sure you're clearing those in your CSS or use a CSS reset:

Then, add position: fixed and a set height to your headercontainer and add a corresponding top margin to the body to make sure they don't overlap:

/* Reset margins -- or use a CSS reset */
html, body { margin: 0; padding: 0}

/* Fix the header container to the top */
#headercontainer { position: fixed; top: 0; left: 0; right: 0; height: 80px }

/* Add a matching top margin to your body element */
body { margin-top: 80px }

score 0 · Answer 3 · answered Jul 24 '13 at 17:37

Use position:fixed and give the element a height. Then at the top of your <body>, insert something like this:

<div id="push" style="height:/* height of menu */"></div>

It's an empty block that "pushes" the content down by the height of the fixed element.

OR

Put everything other than the menu in a containing div, and give that div

margin-top:/* height of menu */"

position absolute html and css problems

3 Answers3