Search code examples
csslayoutcss-positionswipealignment

Is it possible to absolutely position content without setting a height?

I have the following basic markup for a site:

<div class="header"></div>
<div class="content_container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
<div class="footer"></div>

I would like to be able to position the three content divs so that they are horizontally aligned with only one visible at a time so that I can swipe left and right between them.

The catch is that each of the three divs contain varying amounts of content and thus have different heights by default.

Is it possible to allow the divs to retain their default height and still force the footer to appear right under the content (no matter which of the three content divs is currently displayed) without having to resort to using JS properties like offsetHeight, etc.?

I'm thinking that using absolute positioning is the only way to do what I want, but as soon as absolute positioning is used, the footer moves all the way up to right under the header because the content container div is interpreted as having a height of 0.

Solution

  • Demo http://jsfiddle.net/ZRE3s/

    The jquery snippet is just for demonstration, I'm not at all proficient in javascript. But the snippet basically adds a class to the container when a column is clicked.

    The markup is similar to yours except i'm using my own class names but it's intuitive enough.

    <div class='container'>
    <div class='col-1'></div>
    <div class='col-2'></div>
    <div class='col-3'></div>
</div>    
<div class='footer'>Footer</div>

    The columns initially have a max-height of 0 (you can use height, but I used max-height otherwise CSS transitions wont animate height). The columns are given 100% width so they'll take up the width of the container. They're then set horizontally with display: inline-block and container's white-space set to nowrap. The container also has overflow: hidden so that we don't get horizontal scroll-bars. So, only the active column would have a height, others would be collapsed.

    Basically, every column except for active column has zero height and since the container has height: auto; it will take the active column's height.

    I feel like I've rambled here, I hope you've understood the gist.