1

I am trying to figure out why my div is being overlapped by other div.

the markup looks like

 <div  class="headerCarrousel">
    <img src="data/img/1_hero_carrousel/1.jpg" >
    <img src="data/img/1_hero_carrousel/2.jpg" >
    <img src="data/img/1_hero_carrousel/3.jpg" >
 </div>


 <div class="theStory">
    <p>aaaa</p>
 </div>

and my style I am using sass, that's why this code structure.

.headerCarrousel {
   min-width: 1024px;
}

.headerCarrousel img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

}

.theStory{
    margin: 0 auto; 
    text-align: center; 
}

So the div "theStory" is underneath the div headerCarrousel for some reason, being overlapped. Note that I have to have the imagery as a fluid carrousel, that's why I am using width: 100%;

link to illustrate: http://marceloduende.com/tango/

Anybody has a solution for this problem? Thanks.

1 Answer 1

0

Problem solved.

To fix that I had to add my height dynamically with jquery.

$('.headerCarrousel')
.css('height', $('.headerCarrousel img').height());

Thank you all.

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.