Question

I have a webpage laid out as follows…

|----------------------|
|     |----------|     |
|     | Logo div |     |
|     |----------|     |
|                      |
|     |----------|     |
|     |          |     |     
|     | Content  |     |
|     |          |     |
|     |----------|     |
|----------------------|

Currently I’m attempting to center my div (Content) using the following function:

 jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft() + "px");
return this;

}

which I obtained from another SO question: Using jQuery to center a DIV on the screen

This function works fine if my resolution is large enough, however on smaller screens it causes the div I’m centering to “come up” and share space with a div containing a Logo above it. So what I’d like to achieve with jQuery is to center it vertically in-between the logo div #logo and the “end” of the page without floating on top of the logo div.

How would I do this using jQuery?

Answer 1

Since it is absolutely positioned you can’t really reference it in relation to another div.

What you need to do is check the height/width calculations and if they are outside of the minimum requirements then replace them with a fixed value. You could hard code the fixed value or use JQuery to get the height of the logo div.

Something along the lines of:

var h = 100; //Height of logo div
var top_position = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();

if(top_position < h)
    top_position = h;

this.css("top", top_position + "px");