CSS Tip: Preventing horizontal scrollbars in complex CSS layouts

You have just designed a complex layout and have started implementing it on the web, but some layered elements that stick out over the right-hand side of the page creating horizontal scrollbars at the bottom of the page.

The CSS property overflow-x allows us to hide content that overflows its container on the horizontal axis. A quick and dirty fix for our problem would be to add this to our body tag:

1
2
3

body{
    overflow-x: hidden;
}

The problem with this is that when we resize our browser down so far that our main article content gets obscured, the scrollbars are still gone and users can’t read your content.

The solution is to wrap your site in a DIV that you can allow to go full width. Put the overflow property on this element with a min-width of your site’s main width:

1
2
3
4
5

.Container{
overflow-x: hidden;
min-width: 900px;
position: relative; /* IE7 */
}

Click here for a Demo with example code

• ← Newer Posts
• Older Posts →