CODEWITHSUNDEEP
htmlcss
Quasipickle
Quasipickle

Reputation: 4498

How to dynamically position a div under a fixed position div?

I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.

The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.

However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.

Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.

Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.

Upvotes: 0

Views: 3505

Answers (3)

Mark Kramer
Mark Kramer

Reputation: 3214

Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.

body {
    min-width:700px
}
#controls {
    left:0;
    right:0;
    min-width: 700px;
}

Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.

Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/

Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.

The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.

Thanks for making the example like I suggested, it makes answering the question a lot easier.

Upvotes: 1

r0skar
r0skar

Reputation: 8696

I am just giving it a try and I am playing around, but would something like this with dynamic heights work?

http://jsfiddle.net/hbms2/10/

Or am I completely on the wrong track here?

Upvotes: 0

Madara's Ghost
Madara's Ghost

Reputation: 175088

The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.

Therefore, I resorted to JavaScript (jQuery for comfort).

You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.

Here's an example!

What I did:

$(function() {
    $people = $('#people');  //Cache them to not waste
    $header = $('#header');  //browser resources.
    $(window).resize(function() { //When window size changes
        //Check if the height changed
        if ($people.css('margin-top') != $header.height() + 5) {
            //Change height if it has.
            $people.css('margin-top', $header.height() + 5 + 'px');
        }
    });
});

Upvotes: 0

Related Questions