Question

I have this

<div id="container">
  <div id="div1"></div>
<div>

Now, let’s assume that:

• the “container” has a width of 300px
• the “container” has overflow: hidden;
• the “div1” has a width of 1000px;
• the “div1” is absolute positioned, top:0px,left:0px;

The problem:

The “div1” is not hidden, it overflows the “container” but it’s still showing :(.

If I simply remove the “position:absolute” it will work.

How can I hide the overflow of “div1” ?

Answer 1

Add position: relative to container div element.:

Exa:

  <style type="text/css">
        #container
        {
            width: 200px;
            background-color: red;
            height: 60px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        #div1
        {
            background-color: blue;
            position: absolute;
            top:0px;
            left:0px;
            width: 300px;
        }
    </style>

<div id="container">   
        <div id="div1">This is div1</div> 
    <div>