CSS behaviors

Andrew Mutch amutch at waterford.lib.mi.us
Mon Jan 21 12:48:50 EST 2002


I'm working on converting my pages to make them XHTML-compliant. In the process,
I've been revamping some of my older pages to make the compatible with my newer
pages. In the process, I've run into a problem with how the different browsers
are handling CSS.

On my help pages, I have two columns set by DIV's, one for content and one as a
sidebar for resources, comments, links down the page, etc.  The structure and
CSS are generally like this:

#content {
float: left;
margin-left: 5%;
width: 60%;
}

#sidebar {
float: right;
padding-left: 1%;
padding-right: 2%;
width: 18%;
}

In the page, I lay out the DIVs in this order:

<div id="sidebar">
links, etc.
</div>

<div id="content">
text
and more text
etc.
</div>

The idea is that the sidebar floats to the right side of the page and is at the
same vertical level as the content of the text on the left.  The content section
is 60% of the width of the page with 5% of white space between the left side of
the content and the edge of the screen.  The sidebar section gets to use the
remainder of the space to the right of the content.

This has generally been working without any problems.  But, one of my help pages
has several tables in it.  In both IE and K-Meleon (Mozilla-based), the text in
the cells is long enough to cause the tables to extend the width of the page,
respecting the 5% margin on the left.  That by itself is not a problem. However,
it appears that IE is extending the width of the DIV across the entire page to
match the size of the tables.  By comparison, K-Meleon allows the tables to
extend across the page but keeps the DIV width fixed at 60% (you can see confirm
the behavior by setting a background color).  As you might guess, the IE
behavior causes havoc with the page layout as it forces the content DIV down
below the sidebar DIV as there is no space  remaining to the right side of the
content DIV.

My questions:

1. Which browser is properly handling the tables?

2. Why don't the tables honor the DIV width of 60%?

3. Any suggestions for work-arounds?

Thank you,

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI





More information about the Web4lib mailing list