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

2
points

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 almost 7 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 almost 7 years ago
2
points

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 almost 7 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 almost 7 years ago
  • I've edited the answer to include a link to an overview of fluid layout techniques. Joshua Clanton almost 7 years ago
2
points

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

Answered almost 7 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 almost 7 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 almost 7 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 almost 7 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 almost 7 years ago
1
point

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 almost 7 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 almost 7 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 almost 7 years ago