Re: [css-d] 2 Column layout + equal height problem
I would like to add to the original question. I received a request from a developer who wants not only what's described in the ALA article, http://www.alistapart.com/articles/negativemargins, but he also wants the menu area width to expand if text is resized. Each column needs to retain its background color all the way down to the footer. See the request I got below: --- orginal request -- Is there a way, in IE 6+ to do something like the following. Keep the following assumptions in mind: - All text should support user resizing (using View, Text Size). - The page should strive to use all of the browser's horizontal space. That way, on high resolution monitors (at work, I use 1600 pixels by 1200 pixels) that extra space is not wasted. +++ | Menu area with the | Content area that fills/uses | | width specified in | the remaining browser window. | | EMs. That way the | If the browser window gets | | menu width will| sized wider, this area will| | change if the user | also grow wider. | | changes the font || | size (using View, || | Text Size).|| ||| | This area should || | have a background || | color, and should || | extend to at least || | display all of the || | menu text. If the || | content area is|| | longer than the|| | menu, the menu || | background should || | extend to the || | bottom of the || | content area. || +++ Example of menu that is shorter than content area. +++ | Home | Content area that fills/uses | | Search | the remaining browser window. | | Reference | If the browser window gets | | About Us | sized wider, this area will| || also grow wider. This content | || could be a little or a lot, it | || just depends. | +++ Example of menu that is longer than content area. +++ | Home | Welcome to our home page. | | Search || | Reference || | About Us || +++ --- end original request --- Christopher M. Kelly, Sr. (GM22) State Farm Insurance Companies - disAbility Support website: http://intranet.opr.statefarm.org/sysdisab/ phone: 309-763-7069 email: [EMAIL PROTECTED] [Web] Access is not about adding wheelchair ramps to existing pages. It's about getting your page right in the first place. This medium was designed to be accessible. If your work isn't accessible, you're doing it wrong... - Owen Briggs, Web and CSS guru, http://www.thenoodleincident.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Thursday, October 27, 2005 3:39 PM To: [EMAIL PROTECTED]; [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] 2 Column layout + equal height problem If you are up for starting from scratch, try the 2 col layout on this page: http://www.alistapart.com/articles/negativemargins It will walk you through the faux col business. And it is a very stable robust layoutIf you prefer a fixed width layout, simply wrap it in a giant wrapper with a fixed width assigned to it. You can save a div by moving #wrapper outside of the banner and footer and setting the width on that. -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 Column layout + equal height problem
If you are up for starting from scratch, try the 2 col layout on this page: http://www.alistapart.com/articles/negativemargins It will walk you through the faux col business. And it is a very stable robust layoutIf you prefer a fixed width layout, simply wrap it in a giant wrapper with a fixed width assigned to it. You can save a div by moving #wrapper outside of the banner and footer and setting the width on that. -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 Column layout + equal height problem
Hi, I've got the age-old problem of trying to create a layout that has two columns that appear to be equal height, one fixed width and one fluid, no matter which column has more content in it. http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) The layout looks just how I want it to in IE (in IE 6 anyway, not sure about others) except the right column doesn't quite stretch the full height of the content div - there's a gap at the bottom of about 20 or 30px, whereas I want it to meet the footer. I have even more problems in Firefox though, the top of the column doesn't touch the banner above it, again a 20 or 30px gap, and this time the grey column only stretches as far as the content, nowhere near the footer. I'm pretty sure the FF height is something to do with the column being floated right but I've tried numerous thigns and I can't get the layout to work properly in either browser, let alone both! If anyone could shed any light on this for me I'd be very grateful. Cheers, Ali :o) ... Alison Lee [EMAIL PROTECTED] http://www.aycee.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 Column layout + equal height problem
Alison Lee wrote: I've got the age-old problem of trying to create a layout that has two columns that appear to be equal height, one fixed width and one fluid, no matter which column has more content in it. http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) Alison, There is some info on any column longest on the List wiki/FAQ -- http://css-discuss.incutio.com/ Check the faux column link on that page. If you are up for starting from scratch, try the 2 col layout on this page: http://www.alistapart.com/articles/negativemargins It will walk you through the faux col business. And it is a very stable robust layout. If you prefer a fixed width layout, simply wrap it in a giant wrapper with a fixed width assigned to it. Alison Lee Regards, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 Column layout + equal height problem
From: Alison Lee [EMAIL PROTECTED] http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) The layout looks just how I want it to in IE (in IE 6 anyway, not sure about others) except the right column doesn't quite stretch the full height of the content div - there's a gap at the bottom of about 20 or 30px, whereas I want it to meet the footer. I have even more problems in Firefox though, the top of the column doesn't touch the banner above it, again a 20 or 30px gap, and this time the grey column only stretches as far as the content, nowhere near the footer. David had good link suggestions where you will find out about how to create the illusion of full height colums for your page. The gap below the banner in FF is due to white space in your HTML. Put the closing div tag for the banner on the same line as the opening one, and the gap will disappear. It's possible that the problem in IE at the bottom of the page has a similar cause. If not, check for default margins or padding that haven't been zeroed on elements at the bottom of that column, or within the footer. Hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
