Liquid Layout

[spellingace91]

Hello all,

Does anyone have an idea on how to construct a liquid layout? I've been using resolution-based adjustments, but after reading through some threads, I am thinking about using a liquid layout system. I realize that all dimensions are percentage based so they are flexible for any res, but I need some help getting started from scratch. I know CSS very well, and am rather new at JavaScript, so I really just need some general starting places.

Thanks,
spellingace91

[felgall]

I'd advise getting your page layout working correctly irrespective of the size of the browser window that your visitors are using and only then start worrying about using any JavaScript.

[Necron99]

Does anyone have an idea on how to construct a liquid layout?


Do a Google search for "css liquid layout" and you'll get about a bazillion references.
(Well, quite a few anyway).

Dave

[spellingace91]

fellgall - The methods I used to construct the page don't appear to be easily modifiable to accommodate the new adjustments. I was previously at an "ice" layout design using <P CLASS="..."> for almost everything, so it's a big difference for me to adjust to.

Dave - I've looked at some of the sites, and I haven't found one that exactly shows me how to start from a bunch of elements to get to a smooth liquid layout design.

I just need a very elementary starting place, showing me what to do with my elements and how to accomplish the features in a liquid layout (gutters, columns, the like).

[felgall]

It is much easier to build the new page template from scratch and get it working the way you want and then transfer your content than it is to try to modify an existing template with the content already in it to a completely different design.

[spellingace91]

All right then, I appreciate that felgall, and I've taken that advice to construct a rough copy. Is there any recommendable way to get a table that stretches across two columns in a three-column "box" design, but still has two columns inside that table? As in this (http://sites.google.com/a/googleuniversity.org/ski-club/Home) design?

[felgall]

The only thing in that design that looks like it should be a table is the calendar and that is completely in one column.

[spellingace91]

All right then, I'll give that a try.