Pete, On Jan 6, 2006, at 5:24 PM, Maziak, Peter ((Tek Systems)) wrote:
> http://www.msu.edu/~maziak/umg/dra/quadrantlayout.html > > 1) BOTTOMRIGHT DIV wraps (goes below) BOTTOMLEFT DIV in IE/win. I have > temporarily commented out overflow:hidden in the body tag so that this > is apparent when viewing in IE --> will result in extra scrollbar. This is caused by that very long line of text with no spaces. IE forces $bottomright wide enough to contain it and therefor it will no longer fit. > 2a) Is it possible for the HEADER DIV to resize height dynamically > depending on content (instead of the fixed height of 4em). This is > painfully obvious when browser resized to 800x600, forcing a third line > in the header -> forcing the horizontal scrollbar to hide in > BOTTOMRIGHT > > 2b) and/or force TOPLEFT and TOPRIGHT to be flush with BOTTOMLEFT and > BOTTOMRIGHT (ie: vertical align bottom) ...thus allowing some > whitespace immediately above. I don't think this can be addressed with css alone. I'd suggest the following css ------------ * { margin: 0; padding: 0; } body { background-color: white; } #header{ background:#FFFFCC; } #contentWrapper{ clear: both; overflow: auto; } #topleft{ float:left; width:400px; border:1px solid orange; } #topright{ margin-left:402px; border:1px solid purple; } #bottomleft{ float:left; width:400px; overflow:auto; border:1px solid red; display:inline; } #bottomright{ overflow:hidden; border:1px solid blue; } ----------------- On page load, use javascript to calculate the height of #contentwrapper so it just fits in the window. The scroll bar for the window will disappear and be replaced by a scroll bar for #contentwrapper. I used to have code for this, but it appears to be lost. It boiled down to getting the top of #contentwrapper and the height of the content area of the window subtracting to get the height to set for #contentwrapper. If the user has javascript turned off, the content is still available, is just looks like a regular web page. > Additional notes: the four DIVs are required because I will be > placing tabular data into each: You will have to set widths on all the columns anyway (unless you want to let the browser calculate col widths and read them on page load), and you can set overflow to hidden on the contents of the table cell if necessary. I did a mock-up of the iTunes interface once, and it turned out that the most natural way to do this is to wrap the table in a container div. Imagine your second page with tables inside of divs... In fact, If you want to get really fancy, you can keep the markup semantic and use javascript to remove row 1 and col 1 (the th elements) and add #topright and #bottomleft to the markup on the fly. If you decide to go this route and want javascript help, contact me off-list and I'll see what I can put together. hth (ps, I'm in Michigan too!) Roger, Roger Roelofs "Remember, if you’re headed in the wrong direction, God allows U-turns!" ~Allison Gappa Bottke ______________________________________________________________________ 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/
