Databases
StackOverflow2013
Postsdbo
POAbsolute bottom positioning in relative div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAbsolute bottom positioning in relative div
    text
    copied!<p>I want to position "rightBottomPart" to the bottom of "rightPart" and I want "rightPart to be as high as "leftPart". The problem is that I don't know the height of the content in "leftPart" and therefore I can't set the height of "text". (Height in "text" would solve it)</p> <p>Right now it looks like this:</p> <p><a href="http://img695.imageshack.us/img695/7167/wrong.gif" rel="nofollow noreferrer">alt text http://img695.imageshack.us/img695/7167/wrong.gif</a></p> <p>and I want it to look like this:</p> <p><a href="http://img695.imageshack.us/img695/9263/right.gif" rel="nofollow noreferrer">alt text http://img695.imageshack.us/img695/9263/right.gif</a></p> <p>My code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;/head&gt; &lt;body style="margin: 0px 0px 0px 0px;"&gt; &lt;div id="headers" style="background-color: Olive; width: 300px; height: 50px;"&gt;&lt;/div&gt; &lt;div id="text" style="background-color: Navy; position: relative; width: 300px;"&gt; &lt;div id="leftPart" style="background-color: Gray; width: 200px; float: left;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt; &lt;div id="rightPart" style="background-color: Red; float: right;"&gt; &lt;div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;"&gt;top&lt;/div&gt; &lt;div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;"&gt;bottom&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>It looks right in IE7, but not in the rest of the browsers I've tested. If I remove the DOCTYPE-tag it also looks good in IE8, but still not in Google Chrome.</p> <p>What am I missing?</p> <p>Thanks Carl</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload