Solved

CSS overflow issue

Posted on 2010-09-24
7
316 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

628 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