SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: An overflow problem
-
Oct 8, 2007, 06:26 #1
- Join Date
- Mar 2003
- Location
- England, UK
- Posts
- 2,906
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
An overflow problem
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>
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
-
Oct 8, 2007, 06:53 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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; }
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.
-
Oct 8, 2007, 07:22 #3
- Join Date
- Mar 2003
- Location
- England, UK
- Posts
- 2,906
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Oct 8, 2007, 08:34 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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%} 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.
-
Oct 8, 2007, 09:02 #5
- Join Date
- Mar 2003
- Location
- England, UK
- Posts
- 2,906
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul. That works perfectly other than a 3px gap between the floats in IE6. But I think I know what's causing that
-
Oct 8, 2007, 09:20 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
But I think I know what's causing that
Bookmarks