0

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.

http://jsfiddle.net/ququat29/ example code

<div class="ContentFlow">
<div class="loadIndicator">
    <div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
    <img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
    <img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
    <!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
    <div class="slider">
        <div class="position"></div>
    </div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
    <div class="item more-width">
        <div class="center-block club-card content" style="background-color: blue;">
            <div class="club-info-wrapper ">
                <div class="club-info ">
                     <h1 class=" club-name ">coffee</h1>

                    <p class="lead club-location "><strong>name</strong>

                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="item more-width">
        <div class="center-block club-card content" style="background-color: red; ">
            <div class="club-info-wrapper ">
                <div class="club-info ">
                     <h1 class="  club-name ">car wash</h1>

                    <p class="lead club-location "><strong>name</strong>

                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="item more-width">
        <div class="center-block club-card content" style="background-color: yellow;">
            <div class="club-info-wrapper ">
                <div class="club-info ">
                     <h1 class=" club-name ">foutain</h1>

                    <p class="lead club-location "><strong>name</strong>

                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

http://www.jacksasylum.eu/ContentFlow/index.php

kingpinzs
  • 59
  • 7
  • 1
    Can you add some clarification to what you're trying to accomplish? It's not clear. – SethGunnells Sep 08 '14 at 21:47
  • Works for me, it doesn't go over 520px, note that the extra 20px is from the padding, so if thats why you think its not working then you need to change your box-sizing style to like border-box – Patrick Evans Sep 08 '14 at 22:17
  • The active one I want to be 500px wide then when I scroll I want it to shrink like normal and not be set at 500px when its behind the new active item. so when I scroll through the second set that are just divs I want them to grow and shrink like the images do with a max width of 500 right now they are only at width: 151.125px; – kingpinzs Sep 08 '14 at 22:48

0 Answers0