I am using a layout similar to the one from Dynamic Drive here:

The main content area (white) has overflow set to auto. I have given the innerTube inside this main content area a border. However if the contents within this innerTube are greater than the width of the main content area, a horizontal scroll bar will appear as expected, but in Firefox these contents will 'overlap' the border and go off screen (can be retrieved by scrolling horizontally). In other words, the right hand border remains in place, and the content just goes over the op of it, and disappears behind the right hand column.

In IE it behaves exactly as I want - the content pushes the border off screen to be visible only once you scroll over there.

I guess the easiest thing is to paste the source code here. If you copy it into a blank file you'll see what I mean. I've just used one really long word to replicate what happens if a wide image is there instead.

Thanks in advance to anyone who can help me out.

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 

position: absolute;
top: 0;
bottom: 0; 
right: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #cccccc;
color: white;

position: fixed;
top: 0;
left: 0;
right: 200px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: auto; 
background: #fff;

margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
.innertubeWithBorder {
margin: 15px;
border: solid 1px #666666;

* html body{ /*IE6 hack*/
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 




<div id="framecontent">
<div class="innertube">

<h1>CSS Right Frame Layout</h1>
<h3>Sample text here</h3>


<div id="maincontent">
<div class="innertubeWithBorder">

<h1>Dynamic Drive CSS Library</h1>
<p>So I want that border over there ------> to dissappear behind the right hand column like it does in IE, and be visible once you use the scrollbar below and scroll to the right</p>
<p style="text-align: center">Credits: <a href=""&gt;Dynamic Drive CSS Library</a></p>



There are two things you can try.

  1. <wbr> - This tag doesn't make a break in the text, but it will tell the browser that if the text needs to be broken, it should be broken here. You can use Javascript's substr function ( to split the text apart, add the <wbr> tag in, and combine the text back together again.
  2. width: auto This option is less preferable because it may break your layout and leave it looking less that perfect. However, if this is set on your div, it will make sure that the div is always large enough to contain its inner contents.

Hope this helps!

John Nicely
Thanks John. The long text is actually just to recreate something that doesn't wrap. It is indentical to the real problem I'm having, which is with wide images. So imagine that long bit of text is an image just as wide, and that's what I'm trying to deal with. I just used text to make it easier for people to paste into a page and see what I was talking about. I guess I could just link to a wide image somewhere.... I also tried width:auto but unfortunately it didn't work.

Figured it out. Set the innerTubeWithBorder to be fixed as well, and used the same IE CSS hack to make it 100% height & width, then set IT'S overflow to auto. To get the padding I used padding:5px in mainContent for IE, and set the top, bottom, right & left in by 5px for FF.

Thanks to anyone who put any thought into it.