PDA

View Full Version : What is this design called?


the137
02-09-2010, 07:17 PM
Whats up all, first post. I apologize if this has been answered before, but I don't know what to search.

I want to know what a design of this type is called.

example www.hondahookup.com

It has multiple columns that change size with the browser. It also "floats"? as in you can see the boxes slide apart slightly when the browser size is changed.

Specifically, I'm just looking for a term or name to search so that I can figure out how to build my own.

Optimistically, if anyone has a tutorial they can link me to (I run CS4), I would greatly appreciate it, but honestly I can deal with just what the layout is called.

Thanks to all who respond.

walkamongus
02-09-2010, 11:33 PM
hey, welcome. i believe the term is "liquid layout". the one of these that ive had experience with was tricky but it is a cool effect!

edbr
02-09-2010, 11:36 PM
dont use that as a code role model, apart from using tables (not good) it returns 99 errors and 7 warnings which although im not saying they are a crime it is a lot.
it seems to me all you need is a fluid design if you wanrt a name, there isnt a name for that design you mention, well not a polite one at least :)

the137
02-10-2010, 02:00 AM
Thanks for looking at the example code, how do you get it to throw errors?

I'm good with a less than polite name, as long as it brings me to my final destination :-p

"Liquid" is actually one of the templates in cs4, but the different columns are part of one bigger column, which can't be separated (as far as I can tell)

Thanks for the help you guys.

gentleone
02-10-2010, 07:09 AM
102 errors & 19 warnings by W3C :mrgreen:

validator.w3c.org (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hondahookup.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)

Anyways apart from all these errors and a shitty table based layout... to achieve an effect like that (liquid, fluid, whatever) you need to set the widths of your divs in percentages rather then pixels and your font sizes in em's and make use of a min-width. Like mentioned by Walkamongus it is tricky, but of course there are javascript and CSS hacks (if that's what you want) to resize your images as well and that will make it easier for you to achieve cross-browser, liquid layout.

the137
02-10-2010, 05:45 PM
Great resource, great information. Thanks guys.

the137
02-11-2010, 02:44 PM
lol, thanks for sending me in the right direction