CODEWITHSUNDEEP
csshtmloverflow
Tako M.
Tako M.

Reputation: 295

Horizontally-scrolling div without empty space

Is it possible to have a div element with a fixed width, fixed height, and a lot of text on the inside to scroll JUST horizontally?

I think the obvious answer is "yes" but I'm not entirely sure how.

A solution (one that I'm not pleased with aesthetically) is to wrap the text in a very wide div, therefore forcing the parent element to scroll horizontally. (I say "force" because, by nature, it scrolls vertically.) However, the problem with this is that when you scroll all the way to the right, there is empty space.

Sure, you could find the exact length of the text and tweak it to perfection, but I'm not in a position where that is possible. The text (it's actually a lot of inline-block div elements but I don't want to confuse you further) varies in length from one minute to the next.

Here is said solution (the one that has extra space on the right side):

<!DOCTYPE html>
<html>
<body>

    <div style="overflow-x:scroll;">
        <!-- the approximate width of the following text = 5000px -->
        <div style="width:5000px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper egestas diam non pretium. Suspendisse tristique, metus quis rhoncus fringilla, elit enim placerat neque, et faucibus purus lacus ac ligula. Mauris purus enim, scelerisque non magna in, euismod bibendum mauris. Integer leo magna, convallis quis nisi vitae, sollicitudin rutrum eros. Aenean fermentum cursus rhoncus. Etiam tempor vel sapien nec venenatis. Phasellus risus massa, vulputate in magna eu, viverra pellentesque magna. Aenean a ipsum a dolor tempor rhoncus eget sit amet sapien. Nunc dui felis, iaculis pulvinar erat eu, eleifend elementum lectus. Suspendisse aliquam condimentum nibh ut luctus. Aenean imperdiet aliquet sollicitudin.
        </div>

    </div>

</body>
</html>

JSFiddle: http://jsfiddle.net/9AH3k/

(Ironically enough, this code box is exactly what I'm looking for, but how is it made?)

Upvotes: 1

Views: 2037

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

http://jsfiddle.net/Eu2Vh/1/

You just have to use <pre></pre> tags instead of <div> </div>

<pre>
           akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf    akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf    akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
            akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
</pre>

You asked

(Ironically enough, this code box is exactly what I'm looking for, but how is it made?)

It is made with <pre></pre> tags.

Upvotes: 2

Blake Mann
Blake Mann

Reputation: 5490

Sure, all you need to do is use white-space: nowrap;

Basically, this sets an element's text not to wrap to a new line, which causes the container to be pushed out to the width of the text content. This way you can get rid of your huge width setting, and it will automatically be sized.

See example:

http://jsfiddle.net/YD4z2/

Upvotes: 3

Related Questions