Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Thanks
Emery
Comment | File | Size | Author |
---|---|---|---|
#1 | liquid-min-width.patch | 682 bytes | JohnAlbin |
Comments
Comment #1
JohnAlbinGood point. Is there a particular min-width you recommend?
I'm thinking
#page { min-width: 960px; }
Comment #2
JohnAlbinComment #3
JohnAlbinAlso, seems the liquid layout should have a max-width as well.
Comment #4
cedarm CreditAttribution: cedarm commentedI'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.
Comment #5
pkiff CreditAttribution: pkiff commentedWe'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:
http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-a...
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:
http://www.brunildo.org/test/min-widthS.html
or
http://www.brunildo.org/test/min-widthQ.html
There may also be a JQuery method (not tested by me):
http://www.jamesmarquez.com/css-compliant-min-width-and-max-width-for-ie...
Phil.
Comment #6
emerygjr CreditAttribution: emerygjr commentedmin-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.
Emery
Comment #7
pkiff CreditAttribution: pkiff commentedFor the CSS-only method of min-width in IE6, you can add code similar to this to ie.css:
Comment #8
aterchin CreditAttribution: aterchin commentedThanks guys. This is a great reference.
Comment #9
yoroy CreditAttribution: yoroy commentedIf 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%)
Comment #10
JohnAlbinCommitted the patch in #1.