DIVs & Viewports: The Good, The Bad, & the Ugly
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>
CSS:<div id="divRightBorder">
<div id="divContent">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
</div>
</body>
body
PICTURE:{
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;
}
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
PICTURE:{
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;
}
