0

Is there anyway I can style my CSS to make my jsfiddle example contain a fluid width?

http://jsfiddle.net/x2qk7/99/

$(document).ready(function(){

$('a.next').click(function(){  
    $('.slide').animate({"left": "-=480"}, 500);
})
$('a.back').click(function(){  
    $('.slide').animate({"left": "+=480"}, 500);
})

});​

.form-slides {width:480px; overflow:hidden; border: 1px solid #ccc;}
.wrap { width: 9999px; }
.slide {width:480px; float:left; position: relative; background:#eee;}
.next {float:right;}

<div class="form-slides">
<div class="wrap">

    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
        <a href="#" class="back">back</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="back">back</a> 
    </div>

</div>

2 Answers 2

0

Yes. Replace width:480px with width: 100%, and move the border declaration to the .wrap div:

.form-slides { width:100%; }
.wrap { border: 1px solid #ccc; }
.slide { width:100%; float:left; background:#eee; }
.next { float:right; }
2
  • Can you provide a jfiddle example? Oct 10, 2012 at 2:47
  • I need the next and prev to be fluid and they aren't. Thanks for your help. Oct 10, 2012 at 2:51
0

Container is Fluid width. Slides are 100% of parent width. Animations are -(slideId * 100)% See example here: http://psofe.com/mhealth/

Example has a slideshow with fluid width (using this method), and maximum width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.