ansaurus

Question

Absolute bottom positioning in relative div

Answer 1

+3 A:

Hi there!

To keep floats and position under control, you need to keep two things in mind: the position is absolute according to its parent element and usually needs dimensions, and floated objects do not have dimensions by default.

Since your test represents a simple two-column model, have a look at this nice overview here, it might clarify things up a little bit: equal height columns with css

So, the trick here is to give #text a float and pos:rel and then the #right*Part will know where they are positioned.

Have a look here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style>
body             { margin: 0; }
#headers         { background: Olive; width: 300px; height: 50px; }
#text            { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart        { background: Gray; width: 200px; float: left;  display: inline-block; }
#rightPart       { background: Red; }

#rightTopPart    { background: Lime;     position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow;  position: absolute; right: 0; bottom: 0; }
</style>                                 

</head>
<body>
    <div id="headers"></div>
    <div id="text">
        <div id="leftPart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart">
                <div id="rightTopPart">top</div>
                <div id="rightBottomPart">bottom</div>
        </div>
    </div>
</body>
</html>

Kind regards, mtness

mtness 2009-11-19 11:42:11

Yes, you're right. I don't need the float when I'm using absolute positioning.Thanks!!Carl

Callprat 2009-11-19 12:01:10

ansaurus

tags:

views:

answers:

Absolute bottom positioning in relative div

related questions