0

I have a situation where I have a wrapper div that has 840px width.
Now inside that div I put an decorative element (#dekoschrift) that is not so important and that overlaps the wrapper div. I don't want the horizontal scrollbar to be triggered from that element.

here's roughly the situation:

<div class="centerer">
    <div id="wrapper">
          <div id="dekoschrift"></div>
    </div>
</div>

the css:

.centerer { position: relative; width: 830px; margin: 0 auto; height: 100%; }
#wrapper { position: relative; float: left; width: 100%; height: 100%; }
#dekoschrift { 
      background:  url(/images/layout/Variaton_Typogrund.png) no-repeat 0 0 transparent; 
      width: 238px; height: 524px; 
      position: absolute; top: 280px; left: 845px; z-index: 0; 
    }

is that somehow possible?

I've tried to set "overflow: hidden" to the wrapper div, but that obviously cut's the graphics. And I cannot use "overflow-x: hidden" on the body because that would make it impossible to scroll on a small screen.

here's the link to the actual page: www.variaton.ch

any help appreciated!
maybe there's some secret "display: secretly" parameter that I don't know of?!

cheers
stefan

3 Answers 3

0

Use a media query. You can disable scrolling for displays which don't need to scroll and then pop in the scroll bar when it's mandatory.

body {
    overflow-x : hidden;
}

@media all and (max-width: 1024px) {
    body {
        overflow-x : auto;
    }
}
1
  • thanks man! this is an interesting solution and it seems to work without a problem! although I will put the overflow-x: hidden also in a media query... just in case a browser doesn't support media queries. but anyways! thanks for helping out!
    – outline4
    Jan 31, 2013 at 10:31
0

try with

.dekoschrift
{
visibility:hidden;
}
1
  • that is really not going to work! I don't even have to give it a try!
    – outline4
    Jan 31, 2013 at 10:27
0

so the final code looks like that:

   @media all and (min-width: 840px) {
        body {
            overflow-x : hidden;
        }
    }

    @media all and (max-width: 840px) {
        body {
            overflow-x : auto;
        }
    }

thanks Alienwebguy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.