CODEWITHSUNDEEP
htmlcssscrolloverflow
Piotr
Piotr

Reputation: 1447

How to make body content overflow horizontally only?

I am trying to have a page overflow horizontally and not vertically, so if the content does not fit in the page window, i would like it to be scrollable only via the overflow-x bar, thus keeping the page a fixed height. The idea is to make it 'grow' horizontally - so to the right. Could this be done with CSS ideally?

Any help will be appreciated! :)

Thanks and take care, Sincerely, Piotr.

Upvotes: 4

Views: 11703

Answers (4)

Phillip Havea
Phillip Havea

Reputation: 243

You can make it grow automatically. Instead of a set width i.e. width: 6000px; you can use width: max-content; and it will scale automatically to fit horizontally with your content.

height:100%;
width: max-content;
overflow-y:hidden; #optional if you want to lock down height.

Upvotes: 4

Spadar Shut
Spadar Shut

Reputation: 15807

Here's the solution :). This does not require to set a fixed width, but you still have to control the height of your content. And in production you'll most probably want to add inner containers, and add some tweaks to make it work in IE.

Fiddle: http://jsfiddle.net/AWq39/7/.

<body>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
</body>

html, body{
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
}
.page-container{
    display: inline-block;
    height: 100%;
    max-width: 700px;
    padding: 0 2em;
    font-size: 14px;
    white-space: normal;
    overflow: hidden;
    vertical-align:top;
}

Upvotes: 6

Willem
Willem

Reputation: 5404

height:100%;
width:auto;
overflow:hidden

That should do the trick. Just make sure your content does not get higher than the page width or it will be clipped. You could fix that with javascript, creating a new column when the content length exceeds the height.

OK, width:auto doesn't work with floating elements inside... if using javascript (jquery) that can be fixed too. demo: http://jsfiddle.net/Q3dC5/

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77976

It won't automatically grow horizontally but you can easily set it to scroll horizontally if your content demands. You need to set fixed widths to accommodate for the content. Example, fixed height:100%;, fixed width:6000px; and an overflow-y:hidden; overflow-x:scroll; which unfortunately isn't fully compatible with all browsers.

Upvotes: 0

Related Questions