CODEWITHSUNDEEP
cssoverflowcss-float
Sixfoot Studio
Sixfoot Studio

Reputation: 3011

Floating elements left in an overflow wrapper set to hidden

I have a scenario where I need to show only six images at a time on my page. When you click on the next button, these six images will slide out and the next six images will slide in. Here is my html

<div class="thumbScroll">
    <ul class="featuredThumbs">
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-01.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-02.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-03.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-04.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-05.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-06.jpg"></li>
    </ul>
    <ul class="featuredThumbs">
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-07.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-08.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-09.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-10.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-11.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-12.jpg"></li>
    </ul>
    <ul class="featuredThumbs">
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-13.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-14.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-15.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-16.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-17.jpg"></li>
        <li>
            <img src="/App_Themes/2011/images/home-prop-thumb-18.jpg"></li>
    </ul>
</div>

I would assume that if I floated .featuredThumbs to the left, the would display inline. Then, I would have a wrapper called thumbScroll with an overflow of hidden so that only 6 items at a time show. This wrapper I have given a height and width.

So that when I click on my next button, the first six slide out the the left and the next six slide in from the right.

My problem is though, that all 18 items in this case are below one another and not floated to the left.

How do I float these items to the left in a wrapper with the overflow set to hidden.

Upvotes: 1

Views: 888

Answers (3)

Bazzz
Bazzz

Reputation: 26922

put a div around your ul elements inside the container. Give this div the following css:

.theDiv {
  white-space: nowrap;
}

Then also use this css:

.featuredThumbs {
 display: inline-block;
 /* remove float */
}

The div theDiv will contain all the uls next to eachother and will display only those that fit in your wrapper.

Upvotes: 1

Esben
Esben

Reputation: 1971

i presume it would be stupid to ask you if your have used float: left; on you li elements? Anyway, it would be really nice to see your CSS.

Upvotes: 0

methyl
methyl

Reputation: 3312

Try <br style="clear:both" /> just before closing of wrapper.

Upvotes: 0

Related Questions