ansaurus

Question

How do I align an inner div with the bottom of an outer div?

Answer 1

+2 A:

Try this:

.myOuterDiv { position: relative; }
.div2 { position: absolute; bottom: 0 }

Making something position absolute will remove it from the flow; you could account for this by adding bottom padding to .myOuterDiv that is equivalent to the height of .div2

Mike Robinson 2010-01-11 15:17:09

That would work if the outerdiv was static. But I have several outer divs in different heights on the page. I tried something similar before I asked here, and it didn't work.

Steven 2010-01-11 16:18:03

I'm accepting this solution, since it's the most common one used.

Steven 2010-01-11 16:53:37

Answer 2

+1 A:

Mike's solution works well in all browsers. Here's my code using his idea that did what you wanted:

<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        #wrapper
        {           
            overflow: auto;
            position: relative;
        }        
        #left
        {
            float: left;
            width: 300px;
            margin-right: 10px;
        }
        #right
        {
            width: 200px;
            float: left;
        }
        #bottom
        {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        </div>
        <div id="right">
            <div id="bottom"><input type="button" value="Testing"  /></div>
        </div>
    </div>
</body>
</html>

ryanulit 2010-01-11 15:29:41

Answer 3

A:

I would have help but I'm on mobile. But this is just a hint using jquery.

Get the height value of the two div's. Subtract the height values from each other. Now control the margin-top of the right div using the value of the result to push it down.

I'll check back no this if I am on my desk or laptop.

joberror 2010-01-11 15:40:03

Don't know why u get downvoted, but this is the way I currently am testing out, by creating my own jQuery plugin. not quite working, but almost.

Steven 2010-01-11 16:19:47

Answer 4

A:

Your comment implies that you will only have the image in the div and nothing else. In which case, you could set it as a background image, aligned to the bottom:

<style>
.myOuterDiv {
    background: transparent url("myButton.png") no-repeat right bottom;
}
</style>

<div class="myOuterDiv">
    <div class="div1 floatLeft"> Variable content here </div>
</div>

Instead of right bottom you can use left bottom or center bottom if you want that instead. You might not need the inner div either.

DisgruntledGoat 2010-01-11 15:43:48

ansaurus

tags:

views:

answers:

How do I align an inner div with the bottom of an outer div?

related questions