SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fixed width layout with a protruding div - scrolling?

    I have a fixed width layout (based on a grid structure) but I have one pop out element that I want to protrude from the right side.

    This works fine, but it means that there is a horizontal scrollbar at 1024 resolutions - the pop out element makes the page too wide.

    (see the attached picture for a better idea - Green is the 960 wide page, Red is the pop out element, and the dotted line is the browser window)

    With my design it doesn't actually matter if the popout is off the right of the screen, in fact it works better.

    But I can't think of any way of getting rid of the horizontal scroll bar (short of just turning it off, which i don't want to do for accessibility reasons). There's no way to make a browser ignore an element, right?

    Also, there's no way to have a div's background extend beyond the borders of the div, right? (at least not in most browsers).

    Anyone have any thoughts or suggestions?
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    If you set the popout to position: absolute, it won't cause scroll bars. Make sure also to set the grid to position: relative;

    Quote Originally Posted by tom_dot View Post
    Also, there's no way to have a div's background extend beyond the borders of the div, right?
    Right. But you can have bg image on parent elements that create the illusion of this. For example, you could have a bg image on the body element that would look like a background on the wrapper.

    EDIT:
    O, but the way, welcome to SitePoint!

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was thinking about absolutes, but I've always avoided them so it's not something I'm familiar with. I'll start looking into them.

    I already have a repeating background on the body element, so I don't think there's any way to use another element's background in that way - except using absolutes (as the parent element would also push the page width out). But using absolutes would probably make it unnecessary anyway.

    Thanks for the advice. If anyone else has any other ideas then they'd also be appreciated.

    Cheers,
    td

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I rarely use absolutes also, but this is the perfect occasion for one. Having things sticking out is a good use for them. Perhaps you could also try a large negative right margin, but I don't know if that would blow out the design or not.

    For the bg image, you could have another wrapper div 100% wide (or any width, really) just for that if you wanted.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You will still get a scrollbar even if you place the element absolutely I'm afraid.
    you may be able to use the techniques that were shown in a recent quiz for a banner that didn't invoke scrollbars.

    http://www.sitepoint.com/forums/css-...-a-618512.html

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You will still get a scrollbar even if you place the element absolutely I'm afraid.
    Be darned! Sorry for my ignorance. I thought I'd seen that before, but was quite wrong.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You can only get away with absolutes and no scrolling when you pull them to the left (and maybe the top, never tried that one).

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can do something like this that works in ie8 and equivalent but is not really usable in the real sense.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0;padding:0}
    #outer {
        width: 100%;
        overflow:hidden;
        height:250px;
    }
    #page {
        width:760px;
        margin:-250px auto 0;
        background:#ffffcc;
        border:1px solid #000;
        z-index:1;
        position:relative;
    }
    .poke-out {
        width: 200px;
        position: relative;
        margin:0 auto;
        z-index:99;
        left:400px;
    }
    .poke-out div {
        width: 200px;
        position: absolute;
        margin-top:48px;
        height:250px;
        border: 1px solid #000;
        overflow: hidden;
        background:red;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="poke-out">
            <div>Stuff goes here</div>
        </div>
    </div>
    <div id="page">
        <p><a href="#">test</a></p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>
    If it was just an image poking out then you could fake it like this.

  9. #9
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    You can only get away with absolutes and no scrolling when you pull them to the left (and maybe the top, never tried that one).
    Just for my reference, you're right. Absolutes can go off the left side of the screen without causing a scrollbar (using negative left, or right properties), but they don't seem to be able to go off the right side.
    I also can't make them go above the top, it just doesn't seem to move.

    Now I've tried the simple option, I'll have a look into the more complex ones..

  10. #10
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I've been able to do what I want using Paul O'B's answer from the css quiz linked above.

    It seems to work ok, but i haven't had time to do any full testing yet.
    As I understand it, we're:
    - Making a 100% wide container that fills the screen and has no overflow - this prevents the scrollbars.
    - Adding a fixed width inner to help placement of items relative to a fixed width.
    - floating the overflowing element right inside this fixed inner, and then pushing it outside.

    Is that about right?

    A few quick questions for Paul if he doesn't mind:
    - Are there any - woah -earthquake!

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by tom_dot View Post
    Are there any - woah -earthquake!
    Hope you are OK, Tom!

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    crap what's up with the quakes lately? Hope everything's ok for you

  13. #13
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Er.. that was a bit scary. No more CSS for today.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tom_dot View Post
    Er.. that was a bit scary. No more CSS for today.
    Hope you're ok tom_dot - that's one massive quake.

  15. #15
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Tokyo - for now
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Paul O'B View Post
    Hope you're ok tom_dot - that's one massive quake.
    Ok. Back to the CSS - but i've totally lost my train of thought now and the questions I had.

    So anyway, I've based my solution on the one from the CSS quiz. I was just wondering if there were any known issues with that technique? BE good to know before I rely on it too much.

    It seems to work fine in Firefox and ie8, I haven't gotten around to testing it in other browsers yet.

    Many thanks!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tom_dot View Post
    So anyway, I've based my solution on the one from the CSS quiz. I was just wondering if there were any known issues with that technique? BE good to know before I rely on it too much.

    It seems to work fine in Firefox and ie8, I haven't gotten around to testing it in other browsers yet.

    Many thanks!
    You'll need to create the stacking levels carefully for the elements that overlap so that you don't inadvertently place elements on top and stop links from being clicked.

    It all depends on the exact structure of course so may not be an issue.


Tags for this Thread

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
  •