CODEWITHSUNDEEP
htmlcss
Tj Tate
Tj Tate

Reputation: 169

How do I absolutley position a div and have it stay in its original top position with dom elements above it that are floated?

I simply want a div that is absolutely positioned to sit at its current offset top positioning, but im realizing that if any element above it in the DOM is floated (even if that element is inside an element that isnt floated) it will snap to the top of the relative parent. as soon as I remove the above floats the absolutley positioned div snaps to the top. any help is greatly appreciated. here is a fiddle http://jsfiddle.net/hPA3M/2/

Here is my Html:

   <div class="parent">
        <div class="child1">
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
        </div>
        <div class="child2">
        </div>
    </div>

Here is my css:

    .parent {
        position:relative;
        height:800px;
        width:400px;
        background:#ff0000;
        padding:20px;
    }

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;
    }

    .baby1 {
        background:#e1e1e1;
        /*
        toggling float on and off has very different effects
        */
        float:left;
        width:30%;
    }

    .child2 {
        position:absolute;
        width:100%;
        height:100px;
        background-color:#0000ff;
    }

Upvotes: 1

Views: 47

Answers (2)

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

DEMO

When dealing with floating elements is useful to have a clear:both below them. In this case i addedd <div class="clear"></div> below child1.

CSS for .clear is 

.clear {
    clear:both;
}

Upvotes: 0

Oleg
Oleg

Reputation: 7387

Add overflow: hidden for .child1 selector: 

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;

    }

Demo

Upvotes: 1

Related Questions