Solved

CSS overflow issue

Posted on 2010-09-24
7
297 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
oops, sorry got those backwards.  Should be as gurvinder said:

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

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
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
Comment Utility
@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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now