Fixed width layout with a protruding div - scrolling?

HTML & CSS
1

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?

2

If you set the popout to position: absolute, it won’t cause scroll bars. Make sure also to set the grid to position: relative;

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! :slight_smile:

3

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

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

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.

6

Be darned! Sorry for my ignorance. I thought I’d seen that before, but was quite wrong.

7

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

You can do something like this that works in ie8 and equivalent but is not really usable in the real sense.


<!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

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

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
Off Topic:

Hope you are OK, Tom!

12
Off Topic:

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

13

Er… that was a bit scary. No more CSS for today.

14

Hope you’re ok tom_dot - that’s one massive quake.

15

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

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.