vertical & horizontal centering 2

01 Sep 2003

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 <div> to stop this. At last, most users can see the all content if they scroll.


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 <div> (#horizon in this case) in which to centre the content. (The position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats). Min-width/max-width is one of those really useful CSS properties, that would help in designing fluid layouts – if only more browsers supported it.


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 <ul> and <ol> to layout the navigation.

Recent Posts

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Instagram Hickstagram

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

  • 06 Nov 2018

    The light falling on @matthamm this afternoon was like a renaissance painting

  • 02 Nov 2018

    Vector illustration of a Tufted Duck, using @affinitybyserif Designer on the iPad Pro (+ Pencil). This app is a game changer, letting me do the kind of work I’d normally need a desktop computer and a Wacom tablet for. #illustration #birdillustration

  • 01 Nov 2018

  • 01 Nov 2018

  • 31 Oct 2018

    Inktober Day 31: last day! @hicksmade and I decided to finish on a joint drawing using the Inktober logo as the basis. It’s been really fun to do this together, and I never thought we’d manage to keep it up to the end 😊 #inktober #inktober2018 #leighandjondoinktober

  • 30 Oct 2018

    Inktober Day 30. Almost there! @hicksmade drew our retriever Olive, who was named after “Olive the other Reindeer” by J Otto Seibold. This is Olive, with Martini the Penguin, on their way to the North Pole. #inktober #inktober2018 #leighandjondoinktober

  • 29 Oct 2018

    Inktober Day 29. Taking the theme of ‘lies’ from @hicksmade’s post today, here’s a generic picture of a liar. No one particular in mind… #inktober #inktober2018 #leighandjondoinktober #liar

  • 29 Oct 2018

    Inktober Day 28. From @hicksmade’s Willo the Wisp character to its narrator, Kenneth Williams #inktober #inktober2018 #leighandjondoinktober

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

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