Solved

CSS overflow issue

Posted on 2010-09-24
7
308 Views
Last Modified: 2012-05-10
Here's my page: http://www.garbarinishop.com/about-us/

Notice DIV#main: the vertical scrollbars are okay -- they're part of the design -- but the HORIZONTAL scroll is not supposed to be there ... I've double- and triple-checked my width, padding and margin numbers and they should be adding up to allow space for the divs. This is a site-wide issue. Please help!
0
Comment
Question by:PitaMaria
7 Comments
 
LVL 9

Expert Comment

by:valkyrie_nc
ID: 33754149
Is there a reason why you have not applied the entry-content class to the 'main' div instead of the one inside the 'About Us' header?  Your class looks perfect for containing the content in that inset but it's applied too narrowly, imho.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 33754150
inside this css
http://www.garbarinishop.com/wp-content/themes/thematic-child/style.css

please replace this style
#main {
    width:890px;
      height:520px;
      border: 1px solid #999;
       overflow-y:auto;
       overflow-x:hidden;
      padding:0;
}

else you can also override this in your html file
0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 33755243
Here is what you would want to get rid of the bottom scroll bar:
#main {
    width:890px;
      height:520px;
      border: 1px solid #999;
   overflow-x:auto;overflow-y: hidden;      padding:0;
}

Keep in mind when you add a scroll bar it will take up space in that div.  Which is probably why the bottom scroll bar was showing up to account for that space.  If you hide the bottom scroll bar be sure that your content is not getting cut off on the right side underneath the scroll bar.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 9

Expert Comment

by:CCSOFlag
ID: 33755275
oops, sorry got those backwards.  Should be as gurvinder said:

overflow-y: auto;
overflow-x: hidden;
0
 
LVL 16

Expert Comment

by:s8web
ID: 33755412
You have two declarations (separate stylesheets) for #content:

http://www.garbarinishop.com/wp-content/themes/thematic/library/layouts/2c-r-fixed.css
#content (line 34) is setting the width to 540px

http://www.garbarinishop.com/wp-content/themes/thematic-child/style.css
#content (line 234) is setting the width to 700px;

Since the last declaration wins, the width is getting set to 700px which is pushing the div out and causing a horizontal scroll.

You need to either remove the #content declaration in http://www.garbarinishop.com/wp-content/themes/thematic-child/style.css or change it to 540px.

0
 
LVL 4

Expert Comment

by:acashok
ID: 33755858
please try with this :

#main{
border:1px solid #999999;
height:520px;
overflow-x:hidden;
overflow-y:auto;
width:890px;
}


please refer : http://www.brunildo.org/test/Overflowxy2.html
0
 

Author Closing Comment

by:PitaMaria
ID: 33756051
@gurvinder372: That did it. Thanks.

@valkyrie_nc: On another page I need an  to fill that DIV#main -- that's why I'm applying the style in question to DIV#content.

@CCSOFlag et al: Thanks for your attention to my issue. It's much appreciated.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress "chart" plugin recommendation 7 59
Looking for magnifying glass wingding font 3 18
Bottom border change 5 17
Bootstrap 3 - Style a dropdown 1 11
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question