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

Tags: jquery,html,css

Problem :

I need to align an inner div with the bottom of an outer div.

My code looks like this:

<div class="myOuterDiv">
    <div class="div1 floatLeft"> Variable content here </div>
    <div class="div2 floatRight"> <img class="myButton" src="" /> </div>

The content of 'div1' may vary, making the height of the outer div to vary. How can I make sure that my button (div2) always stays at the bottom of the outer div?

I prefer using CSS, but if not possible, I can use jQuery.


I chose to do this the jQuery way, where I bumped into some issues. It's all solved and you can find my working solution here:How can I calculate the height of an element cross-browser using jQuery?

Solution :

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

    CSS Howto..

    How to align DIV right or left or center in CSS without absolute positioning?

    How to separate Text and HTML with CSS

    How to make a header ribbon responsive

    How Can I remove the injected CSS Resource in GWT?

    How do I place a DIV class in a specific position over another DIV class?

    how to get this modal window to work correctly?

    how to prevent form height increase on every click in Internet Explorer 9 in jqGrid

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    Magento - how to locate the location of inline css

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How to get just numeric part of CSS property with jQuery?

    How to add a css on a div by finding a children class on its sibling div by jquery

    How can I get IE8 to accept a css :before tag?

    How to make CSS visible only for Android phone UC browser

    How to adjust the top of an image and an input in the same line?

    Show window inside any web page

    How to add local css file to a page in WebView?

    How to rearrange several divs on window resize - jQuery or CSS

    How to display text left side and icon on right side in html css?

    How do you wrap one text div around another that follows as a sibling in the DOM?

    onsen ui 2 : how to implement android style scrollable tabbar?

    how decrease font size?

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    How do you find the dimensions of a “display: none” element?

    How to change the media attribute of a css file with plain JS

    How can i make a site like this by myself? [closed]

    How to change style for before/after in Angular?

    How do I make this CSS work to have semi-transparent border?

    How to link my HTML file to my CSS file [closed]