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.
Related
I have a dropdown that I would like to display properly outside of the container which has a horizontal scrollbar. It is currently "buried" inside the container.
See demo: https://codepen.io/lzhoucs/pen/EdYgXr
The container has a hard restriction of:
width: 300px;
overflow-x: auto;
My only requirement is that the solution should works with the horizontal scroll bar, and preferably no javascript.
See attempt 1: https://codepen.io/lzhoucs/pen/KGPNpb. This version sort of works when we don't scroll. It beaks as soon as we scroll.
See attempt 2: https://codepen.io/lzhoucs/pen/KGPNaE. This version breaks the scrollbar entirely
This article has a pretty good explanation of the issue and offers a workaround, although it still requires JS to properly position the submenus: https://css-tricks.com/popping-hidden-overflow/
But in your case it seems enough to just remove position:relative from .dropdown - https://codepen.io/anon/pen/KGPWEx
This is due to the fact that even absolutely positioned elements just assume the position they would have in normal flow, when the “coordinates” (top, left, ...) aren’t explicitly specified, but left at their initial default of auto.
(This won’t work though, if any of the ancestor elements further up the tree is positioned - like if you add position:relative for .container in your example, it breaks again. In such a case, I think you might have to go for the “full” workaround as outlined in the mentioned article.)
I know that vertical alignment is an age-old issue and I don't want to beat a dead horse. But I feel like I've spent hours reading all of the clarifications and hacks, as well as what's supposed to work now with HTML5/CSS3 via flex box model, yet I have tried them all and still cannot solve this particular case:
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
Notice when you resize your browser window, the div is always 50% the height and width of the browser window, and is always horizontally centered in the browser window. What I need is to get/keep it vertically centered as well. Is there absolutely any way, given that the div itself and the enclosing div are both of non-fixed (and unpredictable) heights?
Please note the goal usage here is to have this div inside another div, however the my example here puts it merely inside the body in order to best illustrate/simplify/test the results given an arbitrary size of both the enclosing and inner divs via realtime window resizing.
Use flexboxes, specfically the align-self property. Since you're using relative sizes its parent element will need to have some height one way or another, e.g. via min-height:100vh, otherwise it will have no height that its content could align itself to. A body element by default only is as tall as its content, not as tall as the viewport.
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
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/
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.