Check out my site http://hiox.org . How to get rid of horizontal scroll bar?
Well, i did not see the horizontal scroll bar on that site. This is most likely because of resolution. Use this css style however.
scroll-x:hidden;
Buy a wider monitor (I see no horizontal scroll bars)?
Actually Sarfraz's suggestion is good, but something secondary to bear in mind is the wide range of users on your site (some using 1024x768, and still others using 1920x1200) and how to give equal usability to as many as possible.
Is it possible you could reduce the width of a few columns? "Title" and "By" look like they could be a bit smaller... then it won't force the table to be wider than neccessary, thus removing your horizontal scroll bars.
Rekha, I was having the same issues with a page I was working on.
It could be that one or more of your elements widths/margins/padding/border are too wide, creating a invisible extra space in the browser.
A fix that may work is setting the html and body padding/margin to 0 and then changing other elements margin to 0 (i.e. change a header section that spans 100% of the width of the browser, change margin to 0).
Try looking at your page with the Firefox add-on, "Firebug" (link http://getfirebug.com/downloads), to see if there is an element's padding/margin is acting unexpectedly.
Related
I have a problem with an unwanted blank space on the right of of my site and X-scrolling. It seems to me that the navbar causes the problem, as it stretches beyond the container. Via the Google Developer mode I can switch off the clear:both parameter of the navbar and the space will disappear, but the rest of the CSSS will be broken.
The viewport width is set to device width and initial scale is set to 1. Can anyone help me out and give a solution?
The site address is poiskdetei.ru or en.poiskdetei.ru (English version)
Tnank you!
Welcome to SO. I am not sure why that area is there, but I do know one way you could fix it.
You could simply add overflow-x: hidden to the area that is going over. Then it will not be visible to users, and the scrollbar will not be there anymore.
The unwanted x-scrolling is caused by a row which is unwrapped inside a container and hence the default margin of -15px makes it to stretch the body.
Unwrapped row
Output after wrapping
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it's the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don't want. I have a really wide skyline image in the footer (3,000px) and it doesn't cause a scrollbar, so I'm wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
body {
overflow-x:hidden;
}
which will hide any horizontal scrollbars.