Take the tour ×

I have a set of header divs that need to match the width of the content divs below them. In general, the content divs are thinner than the header divs, and they can vary in size.

So, what I do is set the width of the header div to match the width of the content div. Then, because I want the header and content to be wide enough to not cut off any words, I check each header's "scrollWidth" property to see if it's larger than its "offsetWidth" property, and then set the content and header widths the header's scrollWidth.

header.style.width = tableCell.offsetWidth + "px";
if (header.scrollWidth > header.offsetWidth) {
    content.style.width = header.scrollWidth + "px";
    header.style.width = header.scrollWidth + "px";

This works great with Safari and Chrome, but doesn't work at all in FireFox. With Firefox, "scrollWidth" returns the same value as the header's set width.

"Sounds like a great time to use tables" you say, but I can't. The header needs to remain static on the top of the page.

So, how can I get Firefox to return an equivalent value to scrollWidth under these conditions? I've tried setting the overflow of the header divs to "hidden" and "scroll," but that didn't effect anything.

share|improve this question
add comment

2 Answers

I answered a similar question on stackoverflow: Why scrollWidth doesn't work in this case in Firefox?

The problem is that Firefox returns for scrollWidth the clientWidth value, when the overflow is visible.

The workaround I found for Firefox is to set the overflow to hidden, get the correct scrollWidth and revert the overflow to visible. More details and code in the link.

share|improve this answer
add comment

Firefox seems to include the border width, Chrome doesn't. I had to subtract the border width when I was in Firefox. Hacky, but it worked.

share|improve this answer
add comment

Your Answer


