a simple css issue about overflow:hidden

This is my css content :-

   <style type = "text/css">
       li
    {
        display:inline;
    }
    .carousel
    {
        position:absolute; 
        white-space:nowrap;

    }
    .sliderGallery
    {
        width:800px;
        overflow:hidden;
        height:100px;

    }
 </style>

This is my html content :-

 <div id="sliderGallery" class = "sliderGallery">

        <ul id = "carousel" class="carousel">
            <li>
                <img src ="Images/1.jpg" />
            </li>

            <li>
                        <img src ="Images/2.jpg" />


            </li>

            <li>
                    <img src ="Images/3.jpg" />

            </li>

            <li>
                        <img src ="Images/4.jpg" />

            </li>

            <li>
                        <img src ="Images/5.jpg" />

         开发者_运维问答   </li>

            <li>
                                <img src ="Images/6.jpg" />

            </li>
        </ul>
      </div>

As you can see i have set overflow:hidden but still, my content is being displayed if it is more than 800px. Where am i wrong?

Thanks in advance :)

What about adding a height to the div too?

Also try removing position:absolute; on the carousel.

Try changing .sliderGallery to #sliderGallery in your CSS

Danixd above should be correct: setting position:relative on .sliderGallery (the div) will make the ul slide around inside it. Currently, it is sliding around relative to the outer container (or body if you don't have one). You can also try specifying an explicit width for the li.