Vertical Centering with a Shiv Div

30 Nov 2006

Matthew Tretter has solved the perennial problem with the current vertical centering technique – loss of content vertically when the window is too small, without even scrollbars to see that lost content. His simple solution is the addition of a floated ‘shiv div’ that sits at the top, pushing the main content area down, but then collapses when the content arrives at the top of the screen.

This shiv div could also serve other purposes, such as container for skip links, although the addition of a simple little div doesn’t cause me any sleepless nights.

Before I leave the subject of vertical centering, a wee tip. Instead of making the negative margin exactly half the height of the main content, give it 10px more. Its a picture framing trick, as centering it exactly can make it feel as if it’s ‘falling off the page’.

I’m going to implement this genius fix as soon as I can, although the semi-fluid design I desire ( I don’t intend the site to be stuck at 900px wide) still eludes me.

Recent Posts

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Instagram Hickstagram

  • 18 Apr 2018

    Kind of them to notice!

  • 18 Apr 2018

    A very Happy 20th Anniversary to @hicksleigh! I love you more than ever wifey, and still thank my lucky stars that we met. 😘😍

  • 16 Apr 2018

    If anyone’s interested in buying a nice carbon road bike, I’m selling my Colnago 😉 https://www.ebay.co.uk/itm/Colnago-CLX-3-0-2012-carbon-road-bike-size-54/302705911235

  • 15 Apr 2018

    So pretty!

  • 13 Apr 2018

    Tasty one this

  • 10 Apr 2018

    Replacing worn out MacBook keys. I obviously type ‘a’ a lot

  • 08 Apr 2018

    Grown up Fanta

  • 07 Apr 2018

    Reader, I dropped it. #pintofhead

  • 05 Apr 2018

    THE DOOR OF THE TURIN SHROUD

  • 04 Apr 2018

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