#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Southampton, UK
    Posts
    1
    Rep Power
    0

    Recreating frameset layout using CSS?


    Hi,

    I'm trying to recreate this layout:

    http://www.dylanbeattie.net/forums/frameset.html

    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">
    <html>
    <head>
    </head>
    <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;">
    Content<br />
    </div>
    </div>
    </div>
    </body>
    </html>

    http://www.dylanbeattie.net/forums/css01.html

    but the height=100% on innerDiv is ignoring the padding on the parent element (outerDiv) and hence is being clipped by the window.

    Any suggestions?

    Thanks,

    Dylan
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    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:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>New Document</title>
        <style type="text/css">
          #header {
            position: fixed;
            left: 0;
            width: 100%;
            height: 64px;
            top: 0;
            background-color: #ccffcc;
          }
          #footer {
            position: fixed;
            width: 100%;
            height: 24px;
            bottom: 0;
            background-color: #ccffcc;
          }
          #mainmenu {
            position: fixed;
            left: 0px;
            width: 150px;
            top: 64px;
            bottom: 24px;
            background-color: #ffffcc;
            overflow: auto;
          }
          #submenu {
            position: fixed;
            left: 150px;
            width: 200px;
            top: 64px;
            bottom: 24px;
            background-color: #ffccff;
            overflow: auto;
          }
          #content {
            position: fixed;
            left: 350px;
            right: 0px;
            top: 64px;
            bottom: 24px;
            background-color: #ccccff;
            overflow: auto;
          }
        </style>
      </head>
      <body>
        <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="content">Content.</div>
        <div id="footer">Footer (24 pixels high).</div>
      </body>
    </html>
    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).

    The css solution though, doesn't degrade too well in lower resolution displays if your content doesn't fit entirely in the viewport.

IMN logo majestic logo threadwatch logo seochat tools logo