CODEWITHSUNDEEP
htmlcss
Deekor
Deekor

Reputation: 9499

css how to make an elements margin-bottom go to bottom of its container

I need to have an element have a margin-bottom equal to 100% of its container.

For example: http://jsfiddle.net/5hz4g/3/

I would like the padding / margin (padding was used so colors could illustrate) to make the to-bottom div be as tall as the container and push everything to the right.

If i have something like that the margin of to-bottom goes to the bottom of the page. I would like it to go to the bottom of the container. How can I accomplish this?

Upvotes: 1

Views: 1493

Answers (1)

SULTAN
SULTAN

Reputation: 1159

Try this please:

HTML:

<div class="container">
    <div class="to-bottom">
        this is always @ bottom of parent div
    </div>
</div>

CSS:

.container{
    position: relative;
    width: 50%;
    background-color: #eee;
    min-height: 200px;
}
.to-bottom{
    bottom:0px;
    position:absolute;
    width: 100%;
    background-color: #ccc;
    text-align: center;
}

See Example here: http://jsfiddle.net/salota8550/3jPMk/

UPDATE: After discussion with the OP, his need was to have two divs next to each other with the same height

based on that, my answer is beeing update to the following:

EXAMPLE HERE

HTML Code:

<div class="container">
    <div class="greenBox">
        This is GREEN Box
    </div>
    <div class="redBox">
        This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. This is RED Box.. 
    </div>
</div>

CSS code:

.container{
    width: 100%;
    display: table;    
}
.greenBox{
    width: 25%;
    background-color: #a9e8a2;
    display: table-cell;
}
.redBox{
    width: 75%;
    background-color: #ec6446;
    display: table-cell;
}

Upvotes: 2

Related Questions