CODEWITHSUNDEEP
javascriptjqueryhtmlcss
unknown
unknown

Reputation: 251

wrap content inside parent element

I am having problem wrapping all contents inside a parent.My jQuery is working fine. What I intent to do is to make slideshow. Slideshow is working perfect but my problem is to wrap all content inside the "The red box".Rightnow section with id "allprojects" doesn't expand to fill all the contents of sections inside it. Ideally "#allprojects" should contract or expand according to content. This is how it appears
enter image description here As I missing something obvious? please help me.

Bellow is my HTML.

<div id="projects">
     <section id="allprojects" >
        <section id="projectone" class="show">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo semper nulla, id ultricies erat tincidunt at. Vivamus malesuada justo eu massa fringilla, a lacinia justo hendrerit. Integer ornare ipsum non dictum suscipit. Quisque feugiat eleifend posuere. Maecenas porttitor non neque in tempus. Aliquam 
        </section>
        <section id="projecttwo">
           Nam quis ante tellus. Nullam iaculis elementum odio at convallis. Duis sodales porttitor dolor sed lacinia. Mauris sodales, ipsum eu tristique varius, erat mauris luctus tellus, ultrices viverra leo dui at nunc. Sed ac malesuada tellus. Nam quis lacus sit amet nibh egestas adipiscing. Interdum et malesuada fames ac ante 
        </section>
        <section id="projectthree">
           Nulla vitae volutpat nunc. Integer ornare enim vitae euismod viverra. Pellentesque ac hendrerit orci. Praesent eleifend augue luctus magna fringilla posuere. Nulla tincidunt volutpat semper. Morbi malesuada tempus vehicula. Proin non posuere metus. Aenean condimentum velit lorem. Donec at suscipit leo. Morbi 
        </section>
        <section id="projectfour">
           Vestibulum mattis metus rhoncus enim sollicitudin vehicula. Duis id nisl eget neque laoreet sagittis vitae eu justo. Sed et elit sit amet augue dictum dignissim. Cras neque ligula, dictum sed nibh ut, sodales malesuada mi. Duis feugiat semper nibh eget feugiat. In vestibulum augue nec felis tincidunt pulvinar 
        </section>
        <span class="prev">&laquo;</span>
        <span class="next">&raquo;</span>

     </section>

  </div>

CSS:

    html{

    background-size: cover;
    background-color: #F2F2F2 ;
    max-height: 100%;
    margin: 0 auto;


}
body{
    max-height: 100%;
    background-color: #F2F2F2 ;
    margin: 0 auto;
}

#allprojects section{

  position: absolute;
  opacity: 0;
  transition: 1s opacity;

}
.show{
  opacity: 1 !important;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 26%;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 26%;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
#allprojects{
    font-family: 'Gabriela', serif;
    text-align: justify;
    width: 40%;
    font-size: 1.7vw;
    color: #000;
    line-height: 150%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    padding: 4%;
      background-color: #F2F2F2;
      -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
              border-radius: 2px;
              border: 5px solid #D8262E;
    display: block;
}
#allprojects section{
  font-family: 'Gabriela', serif;
    text-align: justify;
    width: 40%;
    font-size: 1.7vw;
    color: #000;
    line-height: 150%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

Upvotes: 0

Views: 160

Answers (2)

sheriffderek
sheriffderek

Reputation: 9053

You have positioned your sections with absolute. This takes them out of the natural flow and therefore, the wrapper has no idea of their volume and collapses.

You'll either need to specify the size of the slider, or do some trick like,

height: 0px; padding-bottom: 50%;

And hack it to get the ratio you want.

Upvotes: 1

Jack
Jack

Reputation: 9388

Elements that are absolute positioned are taken out of the DOM flow.

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?redirect_from_locale=hr#Absolute_and_fixed

Your parent container does not know the height of the child elements, which is why the red box does not clear them.

Upvotes: 1

Related Questions