0

I have two divs on different z-layers. The sidebar div (in red) on the left and the main div on the right. Both have a 2 divs embedded.

The (red-background-colored) sidebar div stops as intended at 50% of the page. However, I fail to hide the overflow [SHOULD NOT BE SEEN. BUT IS VISIBLE.] of this div. Thus it overlays the main div's second inner div [BLOCK RIGHT].

Here is the dilemma, seen in the right hand side with the white background.

http://jsfiddle.net/brazim/v6rk1b4q/39/

Motivation for this layout: With Javascript the user will be able to display either the full content of the sidebar or the main content by dragging the right-hand-side edge of the sidebar div to the left or right.

I can handle the javascript, only the correct overflow is missing.

Thanks for any hints in JsFiddle.

feder
  • 1,849
  • 2
  • 25
  • 43
  • 1
    [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y. which mean if you want to hide something you should consider using `visibility:hidden` or `display:none`. You can check https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone for the differences between the two. – Shinjo Apr 15 '19 at 03:14
  • I wasn't entirely aware about that difference. Thanks. – feder Apr 15 '19 at 09:03

1 Answers1

1

Elements with position: fixed do not relate to its parent container, but to the viewport, so it is not affected by the overflow setting. You should use absolute positioning for that, or, if you need to fix it (consider that, in the case of the sidebar, it is already fixed by its parent) use an alternative solution like display: none

Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning

Fernando Paredes Murillo
  • 167
  • 5
  • display none, would not help, since the "slider" should disclose gradually the right hand side - and not just show dichotome. i.e. display, do not display. – feder Apr 15 '19 at 09:04
  • So, the culprit has revealed. If I change the css class `.box` to `width:100%`, the blue area will wrap. Not so, if I keep an absolute width number e.g. `400px`. I've created a new jsfiddle considering your inputs. http://jsfiddle.net/brazim/phuckbmo/ Isn't there a css attribute to oversteer this? – feder Apr 15 '19 at 09:53
  • Another attribute value I find working for Firefox only, is setting the `display` to `-moz-box`. But that works in mozilla only. https://jsfiddle.net/brazim/pvkdaLsc/ – feder Apr 15 '19 at 10:21