a simple css issue about overflow:hidden

Question

Hello,

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 :)

Answer 1

Try changing .sliderGallery to #sliderGallery in your CSS

Answer 2

What about adding a height to the div too?

Also try removing position:absolute; on the carousel.

Answer 3

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.