Setting element height in responsive layout?

Question

Generally, what markup and CSS will create an element with a percentage-based height in a responsive design? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Boot

Answer 1

Have you tried the inline-block property with vertical-align: top? I recently saw this article that may help you with your problem. Normally height just resizes to fit the content so I'm not exactly sure what you're trying to accomplish. Check this article out... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Usually having a fluid padding-bottom on the parent container solves this problem.

More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

update: on js bin http://jsbin.com/obesuk/1/

markup :

<div class="obj-wrapper">
 <div class="content">content</div>
</div>

css:

  .obj-wrapper {
    position:relative;
    width:50%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
  }