vertical & horizontal centering 2

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing

Here’s the new CSS:

#horizon {
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    margin-top: -200px;
    text-align: center;
    min-width: 900px;
}
#wrapper {
    margin: 0px auto;
    background-color: #fff;
    position: relative;
    text-align: left;
    width: 900px;
    height: 380px;
    }

You’ll still need to use absolute positioning to get the vertical centering, and an outer

I’ve also reduced the height of the main area so that it fits within most browsers at 800x600 with lots of browser chrome. All in all, its still not perfect, but its a lot better.

If you prefer, the other option is a ‘diet’ version of hicksdesign - a basic stylesheet, with larger type and a fluid layout (no scrolling DIV’s).

Finally, one thing I’ve discovered: To make it easier to edit lists where whitespace has to be removed to avoid extra line spacing (IE Win whitespace bug), use the ‘format’ utility in BBEdit. Switching between ‘gentle hierarchal’ (for editing) and ‘compact’ (when you’re ready to upload) has really helped me work with my large menu code where I use `

Contact

Call Jon Hicks on +44 (0)7917 391536
Email
Tweet @hicksdesign

Hicks Design
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom