CODEWITHSUNDEEP
jqueryhtmlcssajax
ChaseHardin
ChaseHardin

Reputation: 2269

Image Slider Div Error

I am creating a image slider with Ajax, but having issues adding a div to my HTML part so I can center the slider... Below I added the centerSliderDiv to center it, but doesn't work. I tried adding a simple background color to test, but that doesn't work either. Not sure why the centerSlideDiv is not working! Any thoughts?

Thanks 

<div id = "centerSlideDiv">
                <button class="prev">
                    Previous
                </button>
                <div id="images">
                    <div>
                        <img src='firstImage.jpg'/>
                    </div>
                    <div>
                        <img src='secondImage.jpg'/>
                    </div>
                    <div>
                        <img src='thirdImage.jpg'/>
                    </div>
                </div>
                <button class="next">
                    Next
                </button>
            </div>

CSS:

button {
    float: left;   
}
#images div {
    border: 1px solid #000;
    float: left; 
    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}​

#centerSlideDiv{
    width: 1000px;
    margin: 0 auto;
    background-color:green;
}

Upvotes: 0

Views: 61

Answers (2)

user3518892
user3518892

Reputation:

Change this :

#images div {
    border: 1px solid #000;
    float: left; 
    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}​

to this :

#images div {
    border: 1px solid #000;

    height:209px;
    margin: 5px;
    text-align: center;
    width: 300px;

}​

Click this demo : DEMO I update demo for you click this link : DEMOUPDATE

Upvotes: 1

arocketman
arocketman

Reputation: 1174

Add overflow:hidden; to your #centerSlideDiv and it should work.

#centerSlideDiv{
    width: 1000px;
    margin: 0 auto;
    background-color:green;
    overflow:hidden;
}

Upvotes: 0

Related Questions