I have 3 links whose combined width totals 690px. If i resize the browser window to be smaller than this width horizontal scrollbars appear, which is what i want.
If i add direction:rtl to the container no horizontal scrollbars appear
<div class="container">
<div><a id="paymentsLink" href="#self">Payments</a></div>
<div><a id="inquiriesLink" href="#self">Inquiries</a></div>
<div><a id="tradeLink" href="#self">Trade</a></div>
</div>
Please see the following fiddle's and resize html area to be smaller than 690px
LTR : Scrollbars appearing and all ok - http://jsfiddle.net/grimmus/hD438/8/
RTL : No scrollbars - http://jsfiddle.net/grimmus/hD438/9/
I am wondering why no scrollbar is appearing when direction:rtl is added to the container ?
I thought you may need to put the "direction:rtl " in body{}
body {margin:0; direction:rtl;}
Related
This seems to me currently like the quadrature of the circle, but nevertheless I try to ask this question here.
I need the following:
header - 100% width, fixed at top
content - fixed width, vertically scrolling content
footer - same width as content, fixed at bottom
scrollbar - scrolling horizontally simultaneously content and footer
I.e. there should be only one horizontal scrollbar at the bottom which scrolls content and footer simultaneously, but no scrollbar between content and footer. The vertical scrollbar should only affect the content.
(of course, the horizontal scrollbar should be auto, i.e. only appear if content/footer width is larger than the current viewport width)
The closest I have arrived at is the following HTML/CSS:
<!doctype html>
<html>
<head>
<title>scroll attempt</title>
</head>
<body style="overflow-x:hidden;height:100vh;margin:0;">
<div style="height:100vh;display:flex;flex-direction:column;">
<div style="width:100%;height:100px;background-color:red;">header</div>
<div style="display:flex;flex-direction:column;height:100%;overflow-x:auto;overflow-y:hidden;">
<!--
the following div should only have a vertical scrollbar,
hence overflow-x:visible; - which is not respected
when setting overflow-x:hidden; the horizontal scrollbar disappears
but then the vertical scrollbar moves when scrolling horizontally
-->
<div style="flex:1;background-color:yellow;overflow-x:visible;overflow-y:auto;">
<div style="width:1200px;height:800px;background-color:orange;">scrolling</div>
</div>
<div style="width:1200px;height:100px;background-color:green;">footer</div>
</div>
</div>
</body>
</html>
Unfortunately, with this HTML/CSS, an unwanted scrollbar appears on the div surrounding the inner content, which is located between content and footer, although overflow-x:visible; was set. When setting overflow-x:hidden; the scrollbar is gone, but then the vertical scrollbar is also scrolled by the horizontal scrollbar at the bottom instead of staying on the right of the page.
The behavior is mostly consistend in current IE/FF/Chrome versions. I also have a Javascipt version that fixes divs on window resize and on vertical scroll, but this flickers horribly in IE, which is why I'd prefer a pure CSS solution.
Here's a jsfiddle: http://jsfiddle.net/nftqjkyq/
Any ideas?
[edit: added more details about wanted behavior of the scrollbars]
<div style="width:100%;height:100px;background-color:green;">footer</div>
change the width of your footer to 100% if you want to remove the second scroll bar on your fiddle
Solved fiddle
http://jsfiddle.net/nftqjkyq/1/
EDIT
Try this one http://jsfiddle.net/nftqjkyq/4/
EDIT
With Sticky Footer that scrolls on overflow (This is impossible to scroll a fixed element using just css)
Here is a solution that could be closer to what you want.....maybe it can just give you the direction.
Try this fiddle: http://jsfiddle.net/nftqjkyq/10/
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x
i've got the next html:
<div id="container">
<div id="content"></div>
</div>
The container div is 1050px wide and includes only the shadow background that is repeated vertically.
The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.
What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?
overflow-x:hidden does not work.
Thx
http://jsfiddle.net/98Eqf/1/
I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.
http://jsfiddle.net/hobobne/98Eqf/2/
I put a empty content div into a td tag in a table. It shows as there is only one line in div. If I set the height of the div, when I input more content than it's height, it still keep the same size as it was. How to add a vertical scrollbar when content need to consume more space in the div? Thanks.
Automatically show scroll bars when content is greater than height and width like this:
<div style="overflow:auto;"></div>
OR
Show scroll bars at all times like this:
<div style="overflow:scroll;"></div>
Below is some reference for CSS overflow properties:
overflow
overflow-x
overflow-y
Use overflow, or overflow-y: auto | hidden | scroll | visible
<div style="max-height:100px; overflow-y:auto"> ... </div>
or
<div style="max-height:100px; overflow-y:scroll"> ... </div>
NOTE: overflow supported since CSS2, but overflow-y - CSS3, Opera 9.6, Safari 3.1
If you want vertical scrollbar then
<div style="overflow-y:auto;overflow-x:hidden"></div>
only vertical scroll
<div style="overflow-y:auto;"></div>
do this in css
div {overflow: scroll}
edit: What's with all the inline styles guys :-(
I've got a menu bar here: ---
Now when you resize the window (so there appears a horizontal scrollbar) and you scroll to the right, the background is vanished! How can I solve this problem?
#kevin; may be you have to define min-width for your menu bar.
for example
.menu{
min-width:1200px;
width:1300px;
}
for more :
Min width in window resizing
http://friendlybit.com/css/min-width-and-max-width-template/
You should wrap everything in a new div, and apply min-width: 960px to that.
<div id="container" style="min-width:960px">
<div id="ovoMenu">
..
</div>
<div id="ovoSubmenu">
..
</div>
</div>
You could just set the min-width on body, but I'm not sure what else will be going on that page.