Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS overflow issue

Posted on 2010-09-24
7
Medium Priority
?
326 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:
Gurvinder Pal Singh earned 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

722 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