An overflow problem

**Dean C** · Oct 8, 2007, 06:26

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Overflow test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
img { border: 0; }
#frame { width: 750px; margin: 0 auto; }
#left { width: 200px; float: left; background: silver; }
#right { width: 200px; float: right; background: silver;  }
#center { overflow: auto; background: pink; }
div.overflow { display: block; overflow: visible; }
</style>
</head>
<body>

<div id="frame">
	<div id="left">
	<p>this is a test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
	</div>
	<div id="right">
	<p>this is a test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
	</div>
	<div id="center">
	<p><div class="overflow">..................................................................................................................................</div>this is a test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
	</div>
</div>

</body>
</html>

What i'm trying to do, is that when there is some content (surrounded in a div with class overflow to indicate it's behaviour) that is wider than the available space in the center div, it overflows into the right hand column, and actually sits on top of the content that is there. As you can see in the example, a horizontal scrollbar is produced. And in IE6, the layout breaks and it puts the center column at the bottom of the page. I'm a bit stuck on this one, any input would be appreciated.

Just as another example scenario, if I had an image in the center column, I'd want it to overflow into the right hand column and lie on top of any content that may be there

**Paul O'B** · Oct 8, 2007, 06:53

Hi Dean,

You can do this for IE7 and firefox etc by simply removing the overflow:auto and using margins for the center column.

Code:

img { border: 0; }
#frame { width: 750px; margin: 0 auto; }
#left { width: 200px; float: left; background: silver; }
#right { width: 200px; float: right; background: silver;  }
#center { margin:0 200px; background: pink; }
div.overflow { display: block; overflow: visible; }

You can't apply overflow:auto to an element and then expect any children to be visible outside of that element. Its like setting display:none on a parent and then trying to make the child visible width display:block

The above should do what you want in ie7 (and other browsers) but won't work in IE6 and under. This is because the way that Ie6 will always expand an elements width to accommodate the content and therefore you get the dropping effect because the element is now too wide to sit in the allocated space. The only thing you can do for IE6 is to hide the overflow but I guess that is not what you wanted.

I can't think why you would want the element on top of the right column content anyway but I can't see a way to make this happen in IE unless you set the overflow element to position:absolute but that would mean that you would need to account for the flow in the center column to compensate for the absolute element.

**Dean C** · Oct 8, 2007, 07:22

I managed to get it working in IE6+ and most of the others using absolute positioning, and the margin. Unfortunately that means that if I remove the left or right divs, that my content no longer spans into the empty space. Then I have to start dynamically targetting the margin using a body class which we don't have the flexibility to do in this system.

Any ideas how I could maintain the overflow so I can omit the left and right divs where I want, and use absolute positioning to solve this problem?

**Paul O'B** · Oct 8, 2007, 08:34

Hi Dean,

Well the only way I could think of would be something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overflow test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
img { border: 0; }
#frame { width: 750px; margin: 0 auto; }
#left { width: 200px; float: left; background: silver; }
#right { width: 200px; float: right; background: silver;  }
#center { overflow: auto; background: pink; }
* html #center{height:1&#37;}
p.overflow { display: block; position:absolute;background:red }
.spacer{height:20px}
</style>
</head>
<body>
<div id="frame">
    <div id="left">
        <p>this is a test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
    </div>
    <div id="right">
        <p>this is a test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
    </div>
    <div id="center">
        <p class="overflow">start........................................................................................................................stop</p>
        <p class="spacer"></p>
        <p>this is a testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre</p>
        <p class="overflow">start........................................................................................................................stop</p>
        <p class="spacer"></p>
        <p> testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre  testcentre </p>
    </div>
</div>
</body>
</html>

However it means you have to account for the absolute element in the middle column flow so I don't know how useful it will be.