CODEWITHSUNDEEP
htmltwitter-bootstrap
Skeeter
Skeeter

Reputation: 173

How to Bootstrap Carousel and Absolute Position

I have an issue I can't figure out. I'm hoping for a CSS expert:) http://pensacolachiropracticspinalcenters.com/

I've created a bootstrap carousel. The html blocks go like this.

<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>

Actual CSS

/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}

#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}

I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.

The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions?

The Issue

Thanks

Upvotes: 1

Views: 1772

Answers (1)

starless13
starless13

Reputation: 424

If you make .carousel-inner height a bit smaller, say 660px instead 667px then the #HomeBoxWrapper not kick the three boxes inside it.

I don't know exacly why, but i tested with Firebug and it works on Firefox 32. Hope it help.

Upvotes: 1

Related Questions