homepage Welcome to WebmasterWorld Guest from 174.129.130.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Position a div directly under an fixed position div
stevemcmillen




msg:4403825
 1:28 am on Jan 5, 2012 (gmt 0)

I have 2 divs in a page. The top is a header (a toolbar in a sense) that sticks to the top of the viewport and fills its width. The page itself can be very wide to accommodate a table of results which may be many columns wide. Thus, I ended up using fixed position for the header so it stays at the top of the viewport (full width) as you scroll left/right or up/down on the page.

In order to prevent the top of the results div from being overlapped by the header, I've had to give it a position:absolute and set the top css attribute. But that's a problem if the font is increased in the browser and the header gets taller.

is there a way to fix the position of the results div to the bottom of the header div? Ideally a CSS-based solution but if needed I don't mind adding Javascript.


Here is the basic code I'm working with:

<html>
<style type="text/css">
#header { position:fixed; top:0; width:100%; z-index:3; background:lightgrey;
/* Following are IE Hacks to force header to stick to top during scrolling */
_position:absolute; _top:expression(eval(document.body.scrollTop));
_left:expression(eval(document.body.scrollLeft))
}
#results { position:absolute; top:35px; width:100%; margin:3px; padding:3px; }
</style>

<body>
<div id="toolbar">some content</div>
<div id="results">Results go here.</div>
</body>
</html>


Thanks in advance!

 

lucy24




msg:4403854
 4:48 am on Jan 5, 2012 (gmt 0)

Is the height of the header div a constant number of pixels or a constant number of ems? The reference to increasing font size seems to imply it's determined by its content. Can the number of lines change, or only the height of a line?

As an alternative to gluing the "results" to the "header", have you tried setting a padding-top on the results? The combination of fixed and absolute makes me a little uneasy. Can't say why :( Actually, the combination of absolute and anything makes me uneasy, unless the absolutely positioned part is in an area where it can't possibly come in contact with anything else.

stevemcmillen




msg:4403860
 5:37 am on Jan 5, 2012 (gmt 0)

# of lines in the header does not change unless fonts get large enough to wrap. So far I've been willing to ignore since the most it overlaps by is a 10-20 pixels unless the user has some really large fonts set (I know of one user who has to set his screen to something like 24pt font to read). Currently I hard-coded a 35 pixel top-border on the results div which gives room for the height of the header under a normal font size. It works unless users have a large font size.

I understand about the user of fixed + absolute but using position:fixed is the only thing I've found to produce the behavior I want where the header stays in view at the top of the viewport while you scroll around the large data set.

I've considered moving to frames since that can easily produce the behavior I want but there really should be ways to produce this sort of UI without frames.

Paul_o_b




msg:4404589
 8:29 pm on Jan 6, 2012 (gmt 0)

As Lucy24 said just add a padding top to #results (no need to absolutely position it) but set the padding in ems and not pixels and then the padding will increase with the text size as required. Just ensure that #header and #results both have the same font-size applied and they will scale together at the same rate (within reason).

Alternatively if using absolute positioning then just use top with ems equal to the height of the fixed element (also sized in ems).

alt131




msg:4404608
 9:54 pm on Jan 6, 2012 (gmt 0)

Paul, you beat me to it :) - my first thought was ems for height and top (For anyone wondering that's because older ie won't expand/contract lengths in px.)

What interested me is that I don't particularly like absolute so tested with position:relative, but that produced an overlap. I'm having a duh moment and can't immediately think why. Any suggestions?

Paul_o_b




msg:4404730
 9:37 am on Jan 7, 2012 (gmt 0)

Any suggestions?


Relative should have worked also so it may possibly have been a collapsing margin issue. You would get a gap at the top of the page with collapsing margins if the inner element in the content has a top margin (adding padding-top or a border to the content area would cure it as you know).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved