position a div below a fixed top div.

clayguthrie29

New Member
Hello all,

I'm attempting to position a div as 'fixed' at the top of a webpage i'm working on. The top div which would be the nav and/or logo area would be fixed at the top of the screen and would not scroll. The second div, the content div, would be placed directly below that div and so on down the page. Problem is, the second div slides up behind the fixed div rather than staying below it. How do i fix this? Here is an example:

http://jsfiddle.net/dcacM/

Notice the 2nd div, the gray one, is 300px tall however it only shows 200px below the the red div and the first 100px is hidden behind the red.

I have tried adding a top margin of 100px to the gray div, but it causes positioning problems when i have a link that points to another section of the same page. Thanks in advance.
 

chrishirst

Well-Known Member
Staff member
Add a TOP margin to the first static or relative element following the position fixed element to restore the document flow to it's natural order
 

clayguthrie29

New Member
The margin-top works unless you have links in your page that link to other sections of the page.

For example if you have a link index.php#about the page will scroll to that section of the page, but it will position itself 100px below the top of the section... which cuts off some of the content in that section.

Does that make sense?
 

chrishirst

Well-Known Member
Staff member
The margin-top works unless you have links in your page that link to other sections of the page.

For example if you have a link index.php#about the page will scroll to that section of the page, but it will position itself 100px below the top of the section... which cuts off some of the content in that section.
Well that is up to you and how you use document fragments.


Using positioning correctly presents no problem for "bookmarking" links.

examples.webmaster-talk.eu/chris-hirst/css/positioning/fixed/

http://examples.webmaster-talk.eu/chris-hirst/css/positioning/absolute/
 

Apokalupsis

New Member
But then the top banner isn't fixed to the top of the browser window anymore.
Which browser are you using? In all that I've tested it in, it stays at the top of the window.

Also, I'm not sure why you'd want the top banner to be "fixed" positionally anyway. It doesn't seem like it takes into account the various resolutions out there that people use.

Here's a wireframe I've been messing with. It uses a header, nav area, various content, footer, etc... all w/o needing to use "position" and it is responsive too!

http://jsfiddle.net/Apokalupsis/YrxeZ/

So again, I'm just not sure why you feel the need to use such positioning as described in your posts. Is it an older browser being used or something?
 
Last edited:

chrishirst

Well-Known Member
Staff member
I'm just not sure why you feel the need to use such positioning as described in your posts. Is it an older browser being used or something?
It's to keep the banner visible no matter how far down the document the user scrolls.
 

Apokalupsis

New Member
It's to keep the banner visible no matter how far down the document the user scrolls.
Ah! Ok, now I get what he's trying to achieve. I missed post #3 earlier.

Can that be done with CSS only? I know it can with CSS + JQuery. I've also done a similar thing for a clickable bg image displayed in the lower right of the window (with CSS only). But having a header do that with CSS only...it's a bit tricky to say the least.
 
Last edited:

Phreaddee

Super Moderator
Staff member
A fixed header with position fixed is hardly tricky.

and once you've fixed your margin errors then it'll not reposition up 100px like it currently is.
 

Apokalupsis

New Member
A fixed header with position fixed is hardly tricky.
A couple things...

It isn't merely a fixed header. It's a fixed header that anchors to areas of the same page and does so only using CSS (no JS or JQ).

Also, doing this specific task may not be tricky to the more seasoned designers, but obviously it is tricky enough to the op to create a thread to find out how to do it. In addition, there hasn't been any real solution yet outside of theory.

So why not provide some helpful tips as a seasoned designer instead of just saying "it's easy" and "fix the errors"? Neither are hardly productive or beneficial to moving the op further towards resolving the issue it seems.
 
Last edited:

clayguthrie29

New Member
I likely didn't clarify myself well initially, but you guys definitely have it now. This was a perfect explanation:

"It isn't merely a fixed header. It's a fixed header that anchors to areas of the same page and does so only using CSS."

I'm not greatly seasoned at CSS, I've tinkered for years and done some websites for people i know. But within the last year I've learned CSS ( late i know ). Overall it's been a pretty easy learn, but I'm a quick learner.

What would be the downside to using jquery to accomplish this? I understand you can use a anchor link and offset it by x pixels which i think would fix my issue? Would it be preferred to find a solution in CSS or would it be advisable to implement jquery to fix this?

Thanks everyone for the tips and such.
 

Phreaddee

Super Moderator
Staff member
http://jsfiddle.net/phreaddee/7AWDY/8/

each of the anchors has a padding top that is offset by the height of the header (plus 10px) so the flow of the document is not disturbed id two, three and four have a negative top margin equal to that of the padding.
on click each of the anchors will be positioned just below the header.
 

Apokalupsis

New Member
http://jsfiddle.net/phreaddee/7AWDY/8/

each of the anchors has a padding top that is offset by the height of the header (plus 10px) so the flow of the document is not disturbed id two, three and four have a negative top margin equal to that of the padding.
on click each of the anchors will be positioned just below the header.
Great explanation, thank you.

Combining yours and the explanation from another designer (CSSgirl) and spending some time just experimenting (perhaps one of the best ways to learn), I was able to add a nav bar and fixed footer as well.

http://jsfiddle.net/Apokalupsis/F4nyf/4/

However, I do have a few questions with regards to how CSS operates.

I understand what these lines do and why they are necessary:

PHP:
01: #top, #one, #two, #three, #four {padding-top:145px;margin-top:0;}
02: #top, #one, #two, #three, #four {margin-top:-145px;}

But I want to clarify a couple things if I could...

(1) Is "margin-top:0" in line 01 just a "reset" of the margin-top? In other words, is CSS reading both lines it as "Ok, reset margin-top to '0' on these id's, then give each of them a margin-top of 145?"

(2) If so, would this be redundant if we had a CSS reset of all elements/attributes at the top of the .css file?

(3) Is it best practice to issue a reset of all css at the top of the .css file...or do it as needed (assuming that is what is being done in line "01" above)?
 
Last edited:

chrishirst

Well-Known Member
Staff member
(1) Is "margin-top:0" in line 01 just a "reset" of the margin-top? In other words, is CSS reading both lines it as "Ok, reset margin-top to '0' on these id's, then give each of them a margin-top of 145?"
Yes and yes.

If so, would this be redundant if we had a CSS reset of all elements/attributes at the top of the .css file?
Style rules cascade, so the last applicable rule take precedent.

(3) Is it best practice to issue a reset of all css at the top of the .css file...or do it as needed (assuming that is what is being done in line "01" above)?

"resets" are overused and not particularly necessary with modern browsers, they are a 'legacy' from the days of badly behaved browsers
 

Phreaddee

Super Moderator
Staff member
HTML:
#one, #two, #three, #four {padding-top:110px;margin-top:0;}
#two, #three, #four {margin-top:-110px;}

I could have also just added #one {margin-top:0;}

but #one as the first item does not need a negative margin top, otherwise it'll sit under the header.
 
Top