1 post tagged “viewports”

View other items tagged “viewports:” Photos, Audio, Videos, Books or Links. View “viewports” on Vox.

DIVs & Viewports: The Good, The Bad, & the Ugly

Oct 12, 2006
Post a comment

PROBLEM:

The new CSS 2.0 standard contains a new interesting feature called viewports. I am not sure yet why they have introduced them but I do understand some problems with them. Recently I was working on a website that had a three column layout with a dynamically sized centered column. Basically the right and left column are only borders nothing special. I’m a fan of all DIV layouts and that’s how I laid out the website, I’m not going to go into why I use DIV as apposed to TABLE that’s a whole other blog. The problem I was running into was that my right border would not continue down the page when a scrollbar was present in firefox but worked fine in IE. In fact the border was only the height of the current window.

Ok so after a little bit of research ok well a lot of research I found that the height of 100% was being pulled from the viewport rather than the page. The viewport is basically an object that is the size of the current viewable area on the browser. I haven’t had time to play with it and figure out what they are good for or not so good for. The reason as to why it worked fine in IE is that IE does not fully support the CSS 2.0 standard and viewports apparently aren’t something they viewed as important.

CODE:
HTML:
<body>

<div id="divRightBorder">
        <div id="divContent">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Content" runat="server">
                </asp:ContentPlaceHolder>
            </form>
        </div>
    </div>
</body>

CSS:
body

{
    min-width: 725px;
    background-color: #FFF;
    background-image: url(images/background-left.gif);
    background-repeat: repeat-y;
    background-position: left;
}
#divRightBorder
{
    background-image: url(images/background-right.gif);
    background-repeat: repeat-y;
    background-position: right;
    height:100%;
}
#divContent
{
    margin: 0px 50px 0px 50px;
    background: #fff;
    clear: both;
}

PICTURE:

Problem

SOLUTION:

So heres the solution to get this layout to work in weather or not the browser fully supports the CSS 2.0 standard. If you put the DIVs inside a set of containing DIVs it will work perfectly. Basically I believe that the reason for this is that the height is pulled from the viewport only for the first set of DIVs this allows the inner DIVs to overflow and function as normal. I know this isn’t a very good explanation but to be honest I haven’t had a whole lot of time to research it. Here is a copy of the working code and a picture of it working in firefox.

CODE:
    HTML:
    <body>
    <div id="rightborder">
        <div id="innercontainer">
            <div id="rightborder2">
                <div id="innercontainer2">
                    <div id="text">
                        <form id="form1" runat="server">
                            <asp:ContentPlaceHolder ID="Content" runat="server">
                            </asp:ContentPlaceHolder>
                        </form>
                    </div>
                 </div>
             </div>
         </div>
      </div>
      </body>

CSS:
body

{
    min-width: 725px;
    background-color: #373737;
}
#rightborder
{
    background-color: #FFF;
    background-image: url(images/Background-Right.gif);
    background-position: right;
    background-repeat: repeat-y;
    height: 100%;
}
#innercontainer
{
    background-image: url(images/Background-Left.gif);
    background-position: left;
    background-repeat: repeat-y;
    height: 100%;
}
#container2
{
    background-color: #b82f2f;
}
#rightborder2
{
    background-color: #FFF;
    background-image: url(images/Background-Right.gif);
    background-position: right;
    background-repeat: repeat-y;
}
#innercontainer2
{
    background-image: url(images/Background-Left.gif);
    background-position: left;
    background-repeat: repeat-y;
}