Absolute bottom positioning in relative div

Question

Absolute bottom positioning in relative div

I want to position "rightBottomPart" at the bottom of "rightPart", and I want "rightPart" to be as high as "leftPart". The problem is that I do not know the height of the content in "leftPart", and therefore I can not set the height of the "text". (The height in the "text" will solve this)

Right now it looks like this:

and I want it to look like this:

My code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body style="margin: 0px 0px 0px 0px;">
    <div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
    <div id="text" style="background-color: Navy; position: relative; width: 300px;">
        <div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart" style="background-color: Red; float: right;">
                <div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
                <div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
        </div>
    </div>
</body>
</html>

This looks correct in IE7, but not in the rest of the browsers I tested. If I remove the DOCTYPE tag, it also looks good in IE8, but still not in Google Chrome.

What am I missing?

Thanks Carl

+3

css positioning

Callprat Nov 19 '09 at 10:36

source share

1 answer

mtness · Accepted Answer · 2009-11-19T11:42:11+0000

, : , .

, , : css

, - #text float pos: rel, # right * Part , .

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

, mtness

Absolute bottom positioning in relative div

More articles: