

Fluid Layout from Hicksdesign - twampss
http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

======
prawn
Bravo:

    
    
      Hello source code curious person from the INTERWEBS!
      What you're doing is (in my opinion) the BEST way to learn and advance, that is, viewing the source. It's how I learnt, and how I'm still learning.
      
      So go ahead, dig away and ask any questions. (see the contact page)
      
      Techniques used on this site are all in the public domain, but the unique combination of CSS and images are what make this site's design. 
      
      Please don't steal wholesale, thats all I'm saying.

~~~
sbhat7
You missed the footer.

    
    
        The problem with natural selection is that there's no one to blame for the design of testicles

------
moultano
Beautiful. This type of thing makes me actually _want_ to learn web design,
which hasn't happened in a loooong time.

------
barrydahlberg
This plays very nicely with zoom in / out on Firefox too.

~~~
cmelbye
Doesn't work very well in Safari: <http://cl.ly/1SFj>

(The font is a result of a Safari Extension that changes the default font to
Helvetica Neue; it's not a rendering problem)

~~~
bbatsell
You've got a bug in your extension there. Doesn't happen on stock Safari 5, it
works perfectly.

~~~
cmelbye
The extension just changes the font to Helvetica Neue. Here's a picture with
the extension disabled: <http://cl.ly/1SJe>

~~~
MWinther
I can't reproduce that in my Safari 5 either, so it doesn't seem to be a
general problem with that browser.

------
Tiktaalik
Absolutely brilliant. Everyone needs to be designing this way.

In the late 90s as higher resolution monitors became prevalent users gained
the ability to have more usable workspace. Unfortunately we saw greedy
webdesigners simply grab more space and browsing the web remained a full
screen experience. We should be able to tile multiple web browser windows but
due to many websites' designs this isn't really possible.

Hopefully this is the start of a new trend in space saving options in web
design.

------
JoachimSchipper
Nice, but is this particularly noteworthy?

Also, the hyperlinks are nasty - they lose their bold-ness when clicked, which
reflows the text.

~~~
mr_justin
It shows a great knowledge of CSS that is not readily seen today on many, if
any, websites.

I see no such unboldedness when said links are clicked. Regardless, not the
point of the article at all.

~~~
silvertab
Very nicely done indeed! Does it play nice with IE? (Can't test it because I
don't have a Windows machine at home). CSS would be much more pleasant to work
with if it was consistent across different browsers...

~~~
what
Not entirely sure, but it looks he uses some js to fix some things for IE8:

<!-- to help IE recognise the new HTML tags --> <!--[if lte IE 8]> <script
src="/js/html5.js"></script> <script
src="/js/css3-mediaqueries.js"></script><![endif]-->

------
quizbiz
How does the layout change based on the width? I wish he talked a bit about
the code he is using.

~~~
kevinholesh
He's using CSS media queries, similar to what's being done here:

[http://broadcast.oreilly.com/2010/04/using-css-media-
queries...](http://broadcast.oreilly.com/2010/04/using-css-media-queries-
ipad.html)

Check out the code he uses to make this happen near the bottom of his main CSS
file:

<http://hicksdesign.co.uk/css/layout.css>

------
Tawheed
I think this is pretty cool. Are there any frameworks/tutorials out there to
create interfaces like this?

~~~
mhd
He specifically mentions this A List Apart article in the post:
<http://www.alistapart.com/articles/responsive-web-design/>

------
treblig
AVC.com should do this. His new redesign lends itself perfectly to this type
of implementation.

------
robspychala
rga.com has been doing this on their main site for a while now

~~~
mbrubeck
They are using a JavaScript "resize" handler though, not pure CSS. And the
layout is much less fluid (it seems to toggle between just two fixed widths).

------
clammer
Font look terrible with Chrome on windows, which is why fluid is so hard to
pull off.

~~~
ugh
I’m reasonably sure that this wasn’t submitted so you can critique the font
choice. The font has not a damn thing to do with the fluid layout – I think?
You could use freaking Verdana!

