Solved

CSS overflow issue

Posted on 2010-09-24
7
309 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
Independent Software Vendors: 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Botom of page is wrong color 5 25
Change of column alignment in div 2 26
specific navigation button disappears on mobile devices 1 62
Position Absolute Goes Beyond Parent 11 20
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

740 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