overlong image header, but how to only show horizontal scrollbar on body content?

views:

answers:

overlong image header, but how to only show horizontal scrollbar on body content?

hi,

I have a 4000px width image slap on the header of my site. for now, the way I hide the horizontal browser scrollbar is with this:

html {
overflow-x: hidden; }

Unfortunately that will make the horizontal scrollbar never appear. I would the browser scrollbar to appear when the main content of my site is hidden from view.

What is the technique/style for this?

Thanks

+1 A:

Put the image into a div with width: 100%, a defined height and overflow: hidden.

By the way, overflow-x is not supported by Internet Explorer 6, so it's not perfectly safe to use yet.

Pekka 2010-03-12 11:51:28

No, but you can use -ms-overflow-x to take care of IE.

Tom 2010-03-12 11:55:10

thanks for the answer, unforuntately with this technique, the header is fixed at its position. if the browser resizes the window, the header should move together with the body. any idea?

David 2010-03-27 11:19:19

A `div` with `width:100%` should expand with the body. Does it not?

Pekka 2010-03-27 11:21:34

it does, but my body/content's container has a fixed width of 950px;so if i put my header image inside the body's container, it will only show the image upto 950px (my image header is 2000 px wide).the problem if i move it outside my body's container, then it won't move together with my body when the user resizes the window.

David 2010-03-27 12:41:19

so my html structure looks like this: <div class="container" style="width:950px;margin: 0 auto;"></div>. My image header is 2000px and needs to move with the div container when the user resizes the window, but should not show any scrollbar until the window is less than 950px.

David 2010-03-27 12:50:55

@David well, you're going to have to take it out the container. If it has 100% width, it *will* resize along with the window when the user resizes it.

Pekka 2010-03-27 12:51:52

actually that's what im trying to do - it doesn't. the image needs to be centered, and needs to move together with the div container. my last attempt was the image was stuck in place.

David 2010-03-27 13:57:50

whew - i think i did it. did it with nested divs. so i just created 2 containers. both containers makes the content centered, but the container with the image header, i set the overflow:hidden there and it worked! thanks so much guys for trying to help!

David 2010-03-27 14:03:34

ansaurus

tags:

views:

answers:

overlong image header, but how to only show horizontal scrollbar on body content?

related questions