My office uses a three column page design that’s basically a center div with left and right margins for the other two columns to fit into. On child pages, we drop the right column and change IDs on the center one to get rid of the right margin.
To get a column effect on the left column, the three (or two) column divs are wrapped by a wrapper div, and a background image is applied to that wrapper that repeats in the Y direction and is the width of the left column. For some reason, the wrapper div needs overflow: hidden to work right, but that presents a problem.
Everything works really well until we run into a page with a wide data table that needs to scroll horizontally. With the overflow: hidden set on the wrapper, the table is predictably chopped off at the edge of the page.
If I remove the overflow: hidden from the wrapper, the page scrolls, but on pages where the left column is longer than the center column, things get screwed up.
Here’s our basic HTML template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Title</title>
</head>
<body>
<div id="mainhead"><!-- main header --></div>
<div id="header">
<div id="search"><!-- search form --></div>
<div id="navigation"><!-- navigation tabs --></div>
<div id="breadcrumb"><!-- breadcrumbs --></div>
<div id="date"><!-- today's date --></div>
</div>
<div id="wrapper">
<div id="subnavigation"><!-- lefthand nav --></div>
<div id="pagecontents">
<!-- contents -->
</div>
</div>
<div id="footer"><!-- footer --></div>
</body>
</html>
And here’s our CSS (with colors and font sizes removed):
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
#mainhead {
width: 100%;
height: 45px;
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 125px;
margin: 0;
padding: 0;
}
#search {
float: right;
margin: 5px 5px 0 0;
text-align: right;
}
#navigation {
position: absolute;
top: 125px;
left: 0;
width: 100%;
height: 25px;
margin-bottom: 0;
padding: 0;
z-index: 100;
}
#date {
position: absolute;
right: 8px;
top: 130px;
z-index: 120;
}
#breadcrumb {
position: absolute;
top: 150px;
right: 0;
height: 15px;
width: 100%;
border-bottom: 1px solid #006;
text-align: right;
padding: 1px 15px 3px 15px;
margin: 0;
z-index: 100;
}
#wrapper {
min-width: 760px;
background: #fff url(/images/navbg.png) top left repeat-y;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
zoom: 1;
}
#subnavigation {
float: left;
width: 240px;
padding: 5px 10px 10px 5px;
}
#pagecontents {
margin: 0 5px 20px 265px;
padding: 5px 0 5px 10px;
}
#footer {
border-top: 1px solid #ccc;
padding: 0 0 20px 0;
width: 100%;
margin: 0 0 20px 0;
}
I know it doesn’t look like much here, but once there’s content in it, it actually works pretty well. If it wasn’t for this problem with the wide data tables, we’d be all set.
I’m trying to figure out if there’s any alternative to overflow: hidden so that wide table won’t get chopped off, but that won’t break our rather simple template. I thought about adding a class to the table so that it scrolls on the page (sort of like a frame) but the problem with that is having to scroll to the bottom of the page to find the scrollbar.
I’m willing to try just about anything other than a new template, as we’d have over 2000 pages to recode.