Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Position a div directly under an fixed position div

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

New User

5+ Year Member

joined:Jan 5, 2012
posts: 2
votes: 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:

<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));
#results { position:absolute; top:35px; width:100%; margin:3px; padding:3px; }

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

Thanks in advance!
4:48 am on Jan 5, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 403

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.
5:37 am on Jan 5, 2012 (gmt 0)

New User

5+ Year Member

joined:Jan 5, 2012
posts: 2
votes: 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.
8:29 pm on Jan 6, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4

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).
9:54 pm on Jan 6, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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?
9:37 am on Jan 7, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4

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).

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members