Hey People:

When my Blog displays on some screens, it shows horizontal scrollbars.

Its not good for my layout!

How can i override or prevent horizontal scrollbars on some user display screens?

4 answers


Your content is simply too wide. Considering the vast amount of negative space involved, simply shrinking it down would probably be the best way to go.

Answered about 9 years ago by Nathan Duran
  • Hi 50. Do you know of any javascript or css implementations that would simply shrink or override horizontal scrollbars without affecting my design and style? rodney oleshin about 9 years ago

You can't (or rather shouldn't) prevent the horizontal scrollbars when your content is too wide for the screen, as this will mean that users are unable to access the part of your content that exists offscreen.. If you don't want scrollbars on those screens, make your content fit on their screens.

You can do this in a couple of ways:

  • A narrow layout for everyone.
  • A fluid or semi-fluid layout that shrinks or grows based on the size of the user's browser. An overview can be found here.
Answered about 9 years ago by Joshua Clanton
  • Tnanks 128. How do i implement Step 2 - I think its the best option. Using a fluid/semi-fluid layout that shrinks or grows based on size of user's browser. How exactly do i go about doing this. What code should be used? rodney oleshin about 9 years ago
  • I've edited the answer to include a link to an overview of fluid layout techniques. Joshua Clanton about 9 years ago

The perfect fluid width layout . Maybe this will help you :)

Answered about 9 years ago by Kyle Sevenoaks
  • Thanks 30. I have seen th URL http://css-tricks.com/the-perfect-fluid-width-layout/ I also downloaded a folder called PerfectFluidWidthLayout which contains the following files index.html, style.css, style-ie.css and an images folder with some gif files. How do i implement or include the files to work for my Blog http://www.RodneyPiper.tv/ rodney oleshin about 9 years ago
  • You're pretty much going to have to redo the entire thing. If this is your first CSS project, I'd recommend doing a lot of reading beforehand. Nathan Duran about 9 years ago
  • Thanks 35. I know that i can implement fluid width on my Blog by applying the PerfectFluidWidthLayout on my pages. What i want to know is how do i do it? Do i just include the files or what? Kindly direct! :-) rodney oleshin about 9 years ago
  • Hi again 35! I have implemented PerfectFluidWidthLayout. However, it doesnt fit my design and style very well. Are they other options like Javascript implementations or a more simple css implementation that works with just overriding horizontal scrollbars? rodney oleshin about 9 years ago

if you'd still like to hide the horizontal scrollbars (which i have done here) You can set these in the css:

overflow: scroll; //Scroll sets the scrollbars to always be visible, even when the content is not longer than the page/div/element, set it to auto to let it appear only when the content exceeds the parent element.
overflow-x: hidden; // This hides the horizontal scrollbar
Answered about 9 years ago by Menno Geelen
  • Thanks 5. In what css should i include "overflow-x: hidden;". I dont have external css files in my project folder. What i do have is different css blocks in each of my pages. The css blocks affect the style and display of different elements and layers of my pages. rodney oleshin about 9 years ago
  • you should make use of external css, else the whole point of using css is gone. You could just aswell style inline. and just put those attributes in a selector. ex. : div.main_content {overflow: scroll;overflow-x: hidden;} Menno Geelen about 9 years ago