How To Position Div Within Document Flow After Absolute Div Nested Within Relative Div?

Given the following HTML: Some text here Some text here

Solution 1:

One way would be to add a height rule to #first using css, making #first taller than #second and forcing #last out from underneath #second. That would be the easiest way I can think of. Does this help?

Solution 2:

First-- why does #second need to be absolutely positioned?

To maintain document flow you should have a height property on both #first and #second, and make sure the height on #first is greater than or equal to the height of #second

Solution 3:

In answer to the question of positioning something following a div whose contents are variable (and hence a variable height), I used the following code to position my controls div following a variable-height middle div. I wouldn't consider it a 'hack', since the browser doesn't know at load time how high the middle div is.

    $('#middleDiv')
    .load(dynamicContent, function () {
        $('#controls')
        .css('top', $('article').height() - ($('#controls').height()) / 2);
    });

The $('#middleDiv').load(xxx) dynamically loads in the HTML snippet I want to display on the page. Since load is asynchronous I have a completion anonymous function to calculate the top of the controls div. Within the dynamic HTML I have a single article element which I can use to calculate the height of the dynamic content - $('article').height.

The second part of the calculation subtracts half the height of the controls to position it just below my content.

The CSS must use relative positioning for this to work:

#controls {
    position:relative;
    left:376px;
    width:100px;
}

#nextExercise {
    height:45px;
    margin-bottom:20px;
    width:100%;
}

The controls on this page are simple, just a button. I added a bottom margin to leave a bit of whitespace following the controls.

I happened to use an absolute position for the article element itself, although I am sure it would also work with a position:relative element.

article {
    position:absolute;
    top:65px;
    left:145px;
    width:480px;
}

Solution 4:

The #last element isn't actually behind #first. It's below it, but #first has 0 height because its only child is pulled out of the document flow by absolute positioning.

Would a different approach serve your needs?

• #second could have a left margin of 180px, then use display: inline-block to make it fit its contents.
• #second could be position: relative instead of absolute, then use display: inline-block to make it fit its contents.

Here are a couple of examples: http://codepen.io/Ghodmode/pen/diqcD

You didn't exactly explain what you need to do, or why #second needs to be absolutely positioned. We might be able to provide a better solution with a little more information.