CODEWITHSUNDEEP
htmlcss
dan2k3k4
dan2k3k4

Reputation: 1409

Position absolute / relative with correct height for wrapper div?

I am trying to set a block of text to show up as trimmed / short version then to use an animation to show the full block of text, so I've put them both into two different elements, and hide/show based on which one you can see.

Here is my sample code, the text is different but it's just for an example of what I am doing. My problem is that I need to always ensure that the green text block in #next shows up always after the red or blue blocks of text.

HTML:

<div class="wrapper">
    <div id="parent">
        <div id="short">
            Only a small amount of text
        </div>
        <div id="long" style="display: none">
            A much longer text with <br>
            some lines<br>
            ...<br>
            ...<br>
            ...<br>
            ...<br>
            Surprise!
        </div>
    </div>
</div>

<div id="next">
    Other content<br>
    to show up<br>
    here<br>
    <button onclick="toggle()">TOGGLE TEXT</button>
</div>

JS:

toggle = function() {
    var lElem = $('#long');
    var sElem = $('#short');
    if (lElem.css('display') == 'none') {
        sElem.hide('fast');
        lElem.show('fast');
    } else {
        lElem.hide('fast');
        sElem.show('fast');
    }
}

CSS:

.wrapper {
    height: auto;
}

#parent {
    position: absolute;
}

#short, #long {
    position: relative;
}

#short {
    background-color: red;
}

#long {
    background-color: blue;
}

#next {
    background-color: green;
    font-size: 3em;
}

JsFiddle : http://jsfiddle.net/6v9fyg2g/

I have tried playing around with position: absolute and relative as well as adding height: 100% but this does not seem to solve the problem.

Upvotes: 0

Views: 897

Answers (1)

Tobia Tesan
Tobia Tesan

Reputation: 1936

You cannot achieve what you want as long as next is not a child of parent and parent is absolute.

From MDN:

absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

(Emphasis mine).

What happens in this circumstance is that parent is placed at (0,0) and the rest of the layout, including next, is flowed without regard for parent, hence next counts for all intents and purposes as the first element and ends up at the beginning.

One possible solution is removing the position: absolute from parent. Then, as you require, "the green text block in #next shows up always after the red or blue blocks of text", like so:

http://jsfiddle.net/6v9fyg2g/4/

You can then adjust the other properties of your divs (e.g. width) as you see fit.

You may want to display: inline or inline-block them for starters (the second option looks closer to how the divs appeared in your original):

http://jsfiddle.net/6v9fyg2g/8/

http://jsfiddle.net/6v9fyg2g/9/

Upvotes: 2

Related Questions