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 handle horizontally uneven navigation in CSS?

    How to make css notifications without jQuery? [closed]

    how to make a box of nxn given in a url?

    How do I display other info on page using only CSS and HTML

    How to re-render a page from a Google Chrome extension?

    How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?

    how to fix customize select box using css?

    How to apply the grayscale jquery plugin to a background image?

    how can i connect my css to my JSP files stored in the WEB-INF folder? Websphere/JSP

    How to ensure three DIV are the same height regardless of content

    How to achieve following graphics via css

    How to share common css and other resources among grails projects?

    How to make angular material dialog box work in IE10

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

    How do I make an image shrink and grow according to re-sizing the browser.

    How fix position element so that while hovering on one element other two element should remain at same place

    How to stop word-wrapping in a CSS Dropdown menu.

    How to speed up a slow loading PHP page that is processing several large arrays?

    How to make a page look good printed/across multiple browsers

    How to add CSS inline in Vaadin?

    How to hide Firefox context menu to show my own menu instead?

    JSoup - how to grab a href (url/link) immediately preceding a ?

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How can I make these CSS absolute positions work in IE?

    How to disable css transition for specific line of css?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to output using digits only?

    CSS how to scale on the bottom instead of the top of an image

    How do I assign styling to a Javascript variable?

    How to display a div forcefully