Comments on: SuperStretch! – A Vertically Fluid Layout Using CSS

By: James Brocklehurst

James Brocklehurst — Fri, 30 Sep 2011 23:33:24 +0000

Most recent versions of FF seem okay.

By: Paul Smith

Paul Smith — Wed, 28 Sep 2011 21:47:45 +0000

Just upgraded to Firefox 3.6.22 and it no longer works when I shrink the browser to cell phone size. Still works in IE 8, Opera 11.51, Chrome 14.0.835.186 and Safari 5.0.3 though. Firefox must have changed something.

By: Paul Smith

Paul Smith — Wed, 28 Sep 2011 21:07:28 +0000

Well that was too easy, I’m a little embarrassed. Not used to percentages however just px and fixed templates. The box model always did confuse me a little. Love to learn new things though. Thanks again.

By: James Brocklehurst

James Brocklehurst — Wed, 28 Sep 2011 09:45:02 +0000

Giving #nav a height of 99% instead of 100% should do the trick, the bottom border is currently cropped by the containing div because borders are applied to the outside of a box, via the CSS box model.

By: Paul Smith

Paul Smith — Tue, 27 Sep 2011 23:34:50 +0000

I’m not sure if this is appropriate to be asking this here, but I’ve been trying all day to get the nav container to be the only one with white borders. I can seem to get the top, left, right done but not the bottom without showing the border extend the length of the wrapper2 which is what I don’t want. I realise that the nav is inside the wrapper2 div but I tried nesting another div around the nav list and that didn’t work either. Any ideas?

By: James Brocklehurst

James Brocklehurst — Tue, 27 Sep 2011 10:31:09 +0000

Hi Paul.

Haven’t updated this in a while and what with the current trend in responsive layouts it could probably do with a refresh with some of these new techniques in mind. Having said that, the approach given here works in older versions of IE that don’t recognise @media queries…

Tweak away, and let me know what you come up with!

By: Paul Smith

Paul Smith — Tue, 27 Sep 2011 05:02:57 +0000

I am interested in tweaking this further with the aim of creating a flexible meta-layout that can work equally well on laptops, notebooks and mobile devices. Stay tuned!

Have you made any progress with this as this is exactly what I am looking for.

I will start with your template above as it seems to be the best fluid css template I’ve found to date. Thanks for this.
Paul

By: James Brocklehurst

James Brocklehurst — Thu, 26 May 2011 11:37:59 +0000

Glad to have helped!

By: naphstor

naphstor — Thu, 26 May 2011 03:54:41 +0000

Thanks a lot. I achieved what i wanted. although my layout was very different and i did not implement any of the technique you explained here, but this technique helped me to get rid of a bug i had in my design.

Thanks again.

By: Damon

Damon — Fri, 29 Apr 2011 20:36:46 +0000

Very clever. I spent all day yesterday trying to figure out this exact same scenario. Thankyousir!