Html Question posted in
Some basic documentation can be found here.

Html – Overflow problem with blank div inside another div

I want to make a slider between two sides of my website so users can adjust the sizes of the two sides. I want the slider to be like a narrow line with a "bubble" in the center for it to be easily draggable, but the bubble won’t overflow the line, because it is div inside the div

my code looks like

main {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

main #separator {
    height: 100%;
    width: 3px;
    background-color: grey;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: e-resize;
    overflow: visible;
}

#separator #separator-bubble {
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
}
<main>
    <div id="separator"><div id="separator-bubble"></div></div>
</main>

I tried overflow: visible; and that stuff but nothing helped

Tags:

2

Answers


  1. 0

    You can also give the bubble a min-width to force the width to overflow its parent container. For example:

    main {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

main #separator {
    height: 100%;
    width: 3px;
    background-color: grey;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: e-resize;
    overflow: visible;
}

#separator #separator-bubble {
    width: 40px;
    min-width: 40px; /* <--- here */
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
}
    <main>
    <div id="separator"><div id="separator-bubble"></div></div>
</main>
    Login or Signup to reply.
  2. 0

    Use absolute positioning

    #separator #separator-bubble {
    position: absolute; /* Add this line */
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search