CODEWITHSUNDEEP
htmlcss
timebandit
timebandit

Reputation: 838

header with a position fixed attribute responds to offset given to content

Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.

This is the header css:

header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF; 
width: 100%;
z-index: 1;

}

This is the content css:

#content {
    position: absolute;
    margin-top: 100px;

}

Here is the codepen.

Please educate me someone :)

Upvotes: 1

Views: 48

Answers (3)

Alex
Alex

Reputation: 26

You used a comma instead of a semicolon here

head { top 0px }

Please replace the comma with smemicolon than you dont need position: absolute .

Upvotes: 1

fnune
fnune

Reputation: 5534

Several observations:

  • position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
  • You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.

Upvotes: 1

franklylately
franklylately

Reputation: 1183

Bad syntax-- used a , instead of ; on line 3

header {
position: fixed;
top: 0px,
left: 0px;

so the attributes top and left are wrecked.

Upvotes: 1

Related Questions