CSS: Dead Center

0 , , Permalink

I recently had to create a splash page for BTN’s upcoming launch of LiveBIG. This involved a single, prominent image on the page with a sticky footer and a top bar header.

Developing on a larger monitor, everything looked great and as it should compared to the design comp. When viewed on a small monitor, there were a few issues. On the comp, there was a certain amount of padding from the top bar the top of the image. When I built the page, I allowed for the same amount of padding; however, on a smaller monitor, the image was now too close to the footer. The other issue was that if you re-size the browser window to have a shorter height, the footer which is stuck to the bottom of your browser, would overlap the image.

Example of page on a smaller monitor

Fix for overlapping sticky footer

Simply add a negative top margin to your footer div. I should probably back up and explain how I got the footer to stick to the bottom of the browser, even if there was no text in the center. The HTML structure looks something like this:

[div id="wrap"] [div id="header"][/div] [div id="content"][/div] [/div] [div id="footer"][/div]

The wrapper is given a min-height of 100% and the bottom-margin is given the negative value of the footer’s height. Do you see what’s happening? By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it.

The footer css looks like this:

#footer {height: npx;margin-top:-npx;position:relative;z-index:10;}

Recall that we placed the footer right after wrapper, creating a body overflow. If you did not specify a negative top-margin, your footer would not visible. To move it up overlapping the bottom of wrapper we use a negative top-margin which is equal to the defined footer height. The z-index was given a value so that the footer would always overlap the center content.

As I mentioned, the issue noticed on the smaller monitor was the the footer was almost touching the center image and in fact, when re-sizing the browser window, it would overlap ever so slightly before stopping. To prevent any overlap, the fix was to add the same value of the footer height as bottom-padding to the main div to protect image from finding itself behind the footer.

Fix for centering the image

Clearly the layout looks best on a larger monitor, but it needs to look decent on small monitors as well. It was decided that the image should be centered. Centering an image requires a little bit of math logic. The div that contained the image requires absolute positioning.

div.img {
height: mpx;
width: npx;
position: absolute;
top: 50% /* The 50% positioning is what gives you the center point */
left: 50%
margin-top: -mpx divided by 2; /* Half the height and width in order to center your image */
margin-left: -npx divided by 2;
}

This is the basis for placing an image dead center in a browser. But in my case, I need the image to be centered between the header and footer bars. The code above made my image too close to the header bar. To rectify this problem, I simply added the height of the top bar to my margin-top. For example, if my image height was 200px and the header bar was 50px, my margin-top should be -150px.

For more information, visit Ryan Fait’s Sticky Footer and this page for a visual on Dead Center.

Comments are closed.