8

Quick question about overflows. I'm working on this page

http://www4.wittenberg.edu/admission_dev/undergrad/ and I'm trying to get the overflow to allow for horizontal scrolls. I've tried setting the body to hidden and the class "real body" to auto. This doesn't seem to work. Any help would be appreciated!

Ben

3 Answers 3

14

you need to wrap your long content div with a position: relative; overflow: auto div.

which i something like this:

.wrapper {
  position: relative;
  overflow: auto;
}

.content {
  position: absolute;
  width: 30000px;
}

for a better example, please check http://jsfiddle.net/wXqPv/

2
  • Plus 1. The reason this works is because of the definite width.
    – Chris - Jr
    Apr 10, 2017 at 16:49
  • so setting width to auto should work when the horizontal content is added? Apr 9, 2019 at 9:58
1

The code below worked for me. Make sure to include it in the parent not the actual element itself.

.parent {
  white-space: nowrap;
}
0

You can use this code with slide changes of above one:

.wrapper {
    position: relative;
    width: 200px;
    height: 100px;
    outline: 1px solid lime;
    overflow-x: auto;
}
.longcontent {
   position: absolute;
   width: auto;
   height: 100%;
}

Your Answer

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

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