Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

Why is this element collapsing?

The parent div collapses over the two buttons at the bottom of the page. From what I understand, collapsing only occurs to a parent when the last children are floated. But this isn't the case here. I don't have any floats. So what's going on here?

HTML

<div class="imgtext-main imgtext"> <!-- this div collapses-->

  <section class="preview-wrap">
    <canvas></canvas>
  </section>

  <section class="comment-wrap">
    <textarea class="comment">Lorem ipsum dolor
 sit amet, consectetuer....</textarea>

    <p class="buttons"> <!-- this part gets collapsed over-->
      <button>Cancel</button>
      <button>Post</button>
    </p>

  </section>
</div>

CSS

/******** Parent **********/

div.imgtext-main{
  position: relative;

  padding: 15px;
  width: 80%; 
  margin: 0 5%;
}





/******** Section Comment *******/

div.imgtext-main section.comment-wrap,
div.imgtext-main section.preview-wrap{
  display: inline-block;
  width: 40%;
  height: 200px;
  vertical-align: top;
}



.imgtext .comment{
  width: 100%;
  height: 200px;
  vertical-align: top;
}




/**** Buttons ******/

.imgtext p.buttons{
  display: block;
  text-align: right;
}


.imgtext p.buttons button{
  margin-left: .25em;
  font-size: 2em;
}

Full code. http://codepen.io/wryn/pen/eJmqXy

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It looks like your padding in the div.imgtext-main selector is what is causing the element to collapse.

Try removing the padding, setting the position property to relative and putting a margin-top, property of something like 20px to your buttons. :-)

jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

Thanks for your input! This wasn't the answer but it helped me figure it out. I had a height set on the container that was smaller than the buttons. Thought it was some obscure css rule I was missing but it was something this simple. Big d'oh moment.