SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Dean C's Avatar
    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>
    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 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; }
    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.

  3. #3
    SitePoint Wizard Dean C's Avatar
    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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 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&#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.

  5. #5
    SitePoint Wizard Dean C's Avatar
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    But I think I know what's causing that
    Yes its the 3 pixel jog and you can offset it with 3px negative margins on the touching sides of the left and right floats


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •