CSS: How to make single div of multiple divs within a div show on the bottom


Tags: css,styles,css-position

Problem :

If I have a div that appears like a big square, and child divs that show values within that div, how do I get one of those divs to show on the bottom regardless of the space the others consume at the top. Hope that makes sense....

Here is a fiddle for example...I want child 3 to not be one of the tile like elements in the parent div, just a note along the bottom kind of thing. fiddle example

html:

<div id='parent'>

    <div id='child1' class='each-element'>Child 1</div>
    <div id='child2' class='each-element'>Child 2</div>
    <div id='child3' class='each-element'>Child 3</div>
</div>

css

#parent{
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
}

div.each-element{
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}

#child3{
    padding:0;
    border:none;
    margin:0

}


Solution :

Basically you set the position on the parent div to relative, and then the position on the child 3 div to absolute. Then also on the child 3 div set the bottom to zero and width to 100% like:

jsFiddle example

#parent {
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
    position:relative;
}
div.each-element {
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}
#child3 {
    padding:0;
    border:none;
    margin:0;
    bottom:0;
    position:absolute;
    width:100%;
}

    CSS Howto..

    How to avoid inheriting opacity property in CSS?

    How to prevent the style added to anchors from footer in JQueryMobile?

    How can I set -webkit-mask-box-image through javascript?

    How to programmatically check CSS styles for particular elements? [duplicate]

    How to make a resizable menu centered on the middle?

    how to adjust width of first cell of a table using CSS

    How to get different height html divs to float up

    How do I align a div at the bottom right corner of a web page even if the content is less?

    How to make width of element full width of screen and not parent css

    How to serve css files in djangos's flatpages?

    How to access lower children using > operator?

    CSS: How can i divide a border into two lines? [duplicate]

    How Do I Limit Scrolling to a Fixed Div?

    how to find a class and apply a style with jquery?

    Compass delimited list separator - how to set to – [duplicate]

    How to set css properties to dynamically created table?

    How to edit the element.style css?

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to do make CSS Toggle like this? [closed]

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    How to highlight one image over other using jquery css? [duplicate]

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    How to select all fieldsets in a form except the first one?

    How to vertically and horizontally center two images inside a div on a responsive page

    HTML/CSS: How do I make an input field with 2 vertically positioned buttons next to it?

    How to set a css class to table header cell

    CSS: How to make background of an element stretch across the entire page?

    How to create Curved & Overlapping Menu Tabs in CSS

    How to hide sliding div with css

    How can design a full screen calendar view in Twitter Bootstrap?