CODEWITHSUNDEEP
csspositioningcss-position
FrediDoo
FrediDoo

Reputation: 43

CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

Just checking to see whether there's a way to do this in CSS before I get my Javascript on!

In the example, the #fixed div gets filled with content dynamically - so we never know how big the content in that div will be.

The beginning of the #absolute div must always be rendered underneath the #fixed div. The #absolute div also gets filled with lengthy content dynamically, so the user must be able to scroll the content in that div, no matter how big it gets.

Without knowing the size of the #fixed div, is there a way using only CSS that we can keep the beginning of the #absolute div underneath the #fixed div?

XHTML:

<div id="right">
    <p>This div is just here to force a scrollbar.</p>
</div>

<div id="fixed">

    <p>This div gets filled dynamically with content of varying length</p>

</div>

<div id="absolute">

    <p>This div also gets filled dynamically with content of varying length,
    and needs to stay underneath the div above.</p>

    <p>This div will sometimes get so high that it stretches below the bottom of the page,
    and because it's inside a fixed positioned div the user won't be able to read all of its content.</p>

</div>

CSS:

#fixed {
    position:fixed;
    border:2px solid green;
    width:200px;
    display:block;
    background-color:white;
}

#absolute {
    position:absolute;
    border:2px solid red;
    width:200px;
    margin-top:90px;
    z-index:-1;
}

#right {
    position:absolute;
    right:0px;
    width:200px;
    height:4000px;
    border:2px solid blue;
}

Upvotes: 3

Views: 4023

Answers (1)

thirtydot
thirtydot

Reputation: 228282

Without knowing the size of the #fixed div, is there a way using only CSS that we can keep the beginning of the #absolute div underneath the #fixed div?

No. CSS cannot help you here.

The absolute/fixed elements are ...

removed from the normal flow entirely ([and have] no impact on later siblings).

and:

the contents of an absolutely positioned element do not flow around any other boxes

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

Upvotes: 2

Related Questions