March 5th, 2003, 09:49 AM
Recreating frameset layout using CSS?
I'm trying to recreate this layout:
without using frames, and if possible without resorting to layout tables. It has to work perfectly in IE/Win32, ideally should work perfectly in Mozilla/Netscape 7 and Opera 7, and degrade gracefully on IE5, Mac, NS4, etc. (I'm porting a legacy site to ASP.NET and want to replace the frames with controls, but the client don't want to change the layout, in case you're wondering...)
In particular, I'm having endless grief with the vertical anchoring (height=100%) issues, making sure the right bits resize, etc. Height=100% seems to do different things on different browsers (inconsistencies in the box model?). I'm getting fairly close with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<body style="height: 100%; width: 100%; margin: 0px; padding: 0px; border: 0px solid #ff00ff; overflow: hidden;">
<div id="OuterDiv" style="height: 100%; overflow: hidden; padding-left: 350px; padding-right: 5px; padding-top: 64px; padding-bottom: 32px; border: 1px solid #0000ff;">
<div id="InnerDiv" style="height: 100%; overflow: auto; border: 1px solid #ffff00;">
but the height=100% on innerDiv is ignoring the padding on the parent element (outerDiv) and hence is being clipped by the window.
March 5th, 2003, 10:34 PM
The size problems you're having are because I don't think you're sure what the width property does in CSS. The width assigns the content width (or width of the rendered content), not the width of the whole element (ref w3c.org). The actual box width is the sum of the width, margins, paddings, and borders. So, for a 100% width, if any of the other properties are greater than zero, the end result is an box that is bigger than the containing box (in your case, the window). Ditto for heights.
As for inconsistent box models, versions of Explorer prior to 6.0 used a box model more consistent with the Windows box model, not CSS. Explorer6 uses both box models, and which is used is determined by the document's doctype (ref: msdn). I didn't look if this applies to your case, but it might...
As for replicating frame layouts, I find it easier to use fixed positioning. For example, a frameset lookalike to your original page would be like this:
The key is to set the overflow property to auto on the necessary elements so that they will scroll properly. Also, since all measurements are not necessarily known, the bottom and right properties are usually used, which measure relative to the bottom-right of the containing box (as opposed ot the top-right corner which is used by the top and right properties).
<?xml version="1.0" encoding="utf-8"?>
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="header">Header (64 pixels high).</div>
<div id="mainmenu">MainMenu (150 pixels wide).</div>
<div id="submenu">SubMenu (200 pixels wide).</div>
<div id="footer">Footer (24 pixels high).</div>
The css solution though, doesn't degrade too well in lower resolution displays if your content doesn't fit entirely in the viewport.