I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/
Related
I'm trying to style up the scrollbar so that it's positioned inside the scrollable area (container with scrollbar), effectively with margin just on the top & bottom of the bar itself.
In the example image, notice how the text flows past the bar, and how the image is positioned above it. Is this achievable?
Note: I'm aware the browser support for these things isn't the greatest, most likely will just have to use a polyfill for a bit.
Edit to clarify one thing: If the user were to scroll down on the example, the text should be visible up to the top edge of the image, if that wasn't clear.
For anyone else who needs this answer:
main::-webkit-scrollbar-button:start,
main::-webkit-scrollbar-button:end {
height: 6vh;
}
I'm trying to move the green box 10px outside of the top of its container. However, since .cover has an overflow of hidden, the top of the green box isn't showing. How can I show the green box without switching around elements in the DOM?
Sorry for the confusion and the lack of info. Also, if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border (on the site I'm working on) that spans the height of the content.
https://jsfiddle.net/Lxbf45y0/1/
if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border
Sounds like you're using overflow:hidden; to create a new block formatting context. Obviously the side effect is that you can't easily have any overflow. That MDN page I linked includes a list of ways to force a new block formatting context. One thing you can do is replace overflow:hidden; with display:inline-block; width:100%;. This demo uses that method: https://jsfiddle.net/sb40ha0n/
As pointed out by Roko C. Buljan, Clearfix methods might also be available to correct this issue.
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
In my current markup, I have two scroll boxes in the dashboard div. I want the gray highlight around the selected task to stretch and meet the highlight around the info box to it's right. Is there a way to do that?
http://jsfiddle.net/rEKwb/2/
Thanks!
edit:
OK, this is what it looks like now.
http://img.photobucket.com/albums/v410/justice4all_quiet/what_it_do.jpg
The gray box around the green box is cut off. I'd like it to stretch to meet the gray border to the right of it, which is in a separate scroll box.
This is what I want it to look like.
http://img.photobucket.com/albums/v410/justice4all_quiet/example.jpg
There is always the space for the scrollbar, even if its not in use.
If you can force the scrollbar to the left, you will get rid of the gap on the right.
You can try changing text direction, to force the scrollbar to the left:
direction: rtl;
I think because you have your <section id="tasks"> with a style of overflow: scroll; it will create a horizontal scroll bar if you try and stretch the <div id="selected_task"> beyond its parents defined width. Basically you can't have elements that are within a overflow: scroll; ignore the scroll rule and render outside of the box... it will always create horizontal scroll bar to manage the extended content.
A workaround may be to use a jQuery scroll bar plugin and play with position:relative and z-index values of your divs sense these plugins usuall use a combination of divs to create their scroll bars and not the browsers scroll bar.