The liquid layout needs to implement min-width preventing overlaying of page elements when the page is reduced horizontally.

That is one of the major issues with liquid layouts.



#1 liquid-min-width.patch682 bytesJohnAlbin


JohnAlbin’s picture

Version:6.x-1.0-beta2» 6.x-1.x-dev
Status:Active» Needs review
new682 bytes

Good point. Is there a particular min-width you recommend?

I'm thinking #page { min-width: 960px; }

JohnAlbin’s picture

Title:Liquid layout (layout_liquid.css) does not have min-width enforced» Liquid layout does not have min-width enforced
JohnAlbin’s picture

Also, seems the liquid layout should have a max-width as well.

cedarm’s picture

I'm currently working on a liquid layout with 6.x-1.0-beta3. This is what I was looking for and the 960px minimum is exactly what I expected. Personally I'd provide max-width as an option but leave it commented out.

pkiff’s picture

We're planning on using 760px for our site, but 960px/980px would probably be a more popular choice and would meet more common expectations than 760.

Note that IE6 does not respect min-width/max-width, and so if you want it to work with IE6, then you'll have to add some additional code for IE6. Some people use an "expression" code that is only recognized by IE and requires JavaScript:

For a CSS-only method, I think it may be quite a challenge to have both min-width AND max-width. Here is one CSS method that works well in creating min-width only:

There may also be a JQuery method (not tested by me):


emerygjr’s picture

min-width can easily be enforced by setting the min-width. It works well with FireFox, IE7 and Safari. However IE6 does not recognize it. Using this IE6 hack the problem can be solved:

* html #page {
width: 100%;
width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth
: document.body.clientWidth) > 1020 ? "100%" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth
: document.body.clientWidth) < 960 ? "960px" : "100%"));

You will have to adjust the numbers to match the min-width value used for Firefox and other browsers with the min-with rule.


pkiff’s picture

For the CSS-only method of min-width in IE6, you can add code similar to this to ie.css:

#page, #page-inner 
     _height: 0;

     _border-left: 960px solid #fff; /* use a border that will be transparent on actual backgrounds */

    _margin-left: -960px;
    _position: relative;
aterchin’s picture

Thanks guys. This is a great reference.

yoroy’s picture

Status:Needs review» Reviewed & tested by the community

If we can keep this issue to just adding a min-width, then I'm in favor of 960px;

(I like to define a max-width for liquid layouts as a percentage of say, 90%)

JohnAlbin’s picture

Status:Reviewed & tested by the community» Fixed

Committed the patch in #1.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.