The Hickensian
1.09.03 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 800×600 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
- and
- to layout the navigation.
Recent Posts
26.01.10 The Handbag has been raised!
22.01.10 Guide to the Internet (2000)
20.01.10 Designer, not a construction worker
19.01.10 Why you can never work 'full time'
16.01.10 Dream Report: Look at the Hygiene!
Or Full Archives
The Hickensian is the journal of Hicksdesign, a creative partnership of Jon & Leigh Hicks. Read more about us.
playlist
Hickr | RSS
Contact
Hicksdesign
Island House
Lower High Street
Burford
Oxfordshire, UK
OX18 4RR
+44 (0)7917 391 536
I am currently working full-time with Opera, and not taking on any new projects
© Hicksdesign Ltd 2003-10
4 comments
Journal RSS Feed





Download vCard
Comments | RSS
∞ JTG said 2353 days ago:
Welcome back Jon!And you're back with interesting tips... and with a nice new menu.
What have you drunk on holiday? css cubalibre and xhtml lemonade?
You may offer... :-)
∞ Jon Hicks said 2353 days ago:
Thanks JTG! It was more like php real ale...I'm going to be fiddling with the menu some more soon. I was hoping to have some more time to work on cosmetic bits for the site, but improving the centering thing took me a long time.
∞ Sam Newman said 2352 days ago:
Works like a charm (under Mozilla Firebird). You inspired me to try and fix a problem with my sidebar on the google cache now :-)∞ Jon Hicks said 2351 days ago:
Thanks Sam! Its a relief to have confirmation that its working!