CODEWITHSUNDEEP
javascriptvertical-alignmentcenteringmargins
Alvaro Millan
Alvaro Millan

Reputation: 3

div centered vertically with specific margin when resize

I really need some help.

I have this test-web: www.sfrpsicologia.com/inicio.html

As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.

Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.

Thank you very much

Upvotes: 0

Views: 164

Answers (1)

kidwon
kidwon

Reputation: 4524

Don't use absolute positioning in this case. You are trying to solve poor design problem with javascript and that's not a good practise. Use sticky footer approach http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ and overthink your page structure based on that technique.

OK I got what you meant.

Do this , however I don't guarantee it will work because I can't test it on your site but it's supposed to if any obstacles occure you should modify it to work. I'm useing jQuery you should be familiar with it.

So step 1(get the div) <div id=wrapp> and take it's height

var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();

step 2(Set some other variables)

var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;

These heights are the elements besides your <div id=wrapp> in your case they might be a few more or less.

var footerH = 34;
var headerH = 74;

The idea is when there's no room for all of them on the screen stop <div id=wrapp> from going upwards.

step 3 (All this is bind to window resize event):

jQuery(window).resize(function(){

    winH = jQuery(this).height();
    pos = wrapp.position();    
    if(winH  < h + headerH + footerH  )
        wrapp.css({'top' : pos.top});
    else
        wrapp.css({'top' : '50%'});
});

Update window height on resize, also get <div id=wrapp> position object and if(there's no more room according to all the heights you put) fix the top position to current top position of <div id=wrapp> else put it back to percentage.

Here's an example: http://jsfiddle.net/F7mrf/44/

If you got the idea with very little modifications it should work, you'll just have to do the math and put the right numbers, good luck

Upvotes: 1

Related Questions