ansaurus

Question

Positioning a div near bottom side of another div

Answer 1

+13 A:

Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html><body>
<div style='border: 1px solid yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='border: 1px solid green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='border: 1px solid magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

RichieHindle 2009-05-13 13:35:50

Thank you, your solution is almost correct. I only had to add "//margin-left: -40px" to green block's style for IE. Without this hack with margin-left attribute your green block was disposed left in IE7. Can anyone explain where this 40px comes from?

Roman 2009-05-13 13:51:42

IE7 was horizontally positioning the green div after the word "Outer". I've updated the code to specify "left: 0".

RichieHindle 2009-05-13 14:05:15

This is it. Nice!

Roman 2009-05-13 14:16:19

Answer 2

+4 A:

You need a wrapping div for the bottom one, in order to center it.

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

Magnar 2009-05-13 13:40:42

Answer 3

A:

Works well on all browsers including ie6.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
 </div>
</div>

Dmitri Farkov 2009-05-13 14:21:59

ansaurus

tags:

views:

answers:

Positioning a div near bottom side of another div

related questions