CODEWITHSUNDEEP
htmlcss
jevgenij
jevgenij

Reputation: 864

Place floating element at the bottom of its parent

Tie floats up to bottom, while keeping its participation in layout:

enter image description here

The way I go:

<div id="wrapper">
    <div id="yellow_block_one"></div>
    <div id="yellow_block_two"></div>
    <p>Content to fill and flow around</p>
</div>

Saw similar questions here, but no solution. So what I have already got:

enter image description here

Here is the actual code that forms this screenshot: http://jsfiddle.net/bmo25tx6/

And snippet:

#i_am_main_container {
    width: 500px;
    height: 100%;
    display: table;
    background-color: rgba(200, 200, 100, .5);
}
#i_am_sandbag_pusher {
    width: 10px;
    height: 100%;
    float: right;
    margin-bottom: -100px;
    background-color: red;
}
.i_am_sandbag {
    height: 50px;
    float: right;
    clear: right;
    background-color: yellow;
}
<div id="i_am_main_container">
    <div id="i_am_sandbag_pusher">I AM HERE TO PUSH IT DOWN</div>
    <div class="i_am_sandbag" style="width: 125px">I AM HERE</div>
    <div class="i_am_sandbag" style="width: 250px">TO MAKE IT FLOW AROUND</div>
    <h1>I'M THE HEADER 1</h1>
    <p>I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum!</p>
</div>

But it works only in Chrome and works very weird. For instance the whole layout fails if you remove the header.

Haven't found solution using javascript so far either.

Upvotes: 2

Views: 78

Answers (2)

Sergiy T.
Sergiy T.

Reputation: 1453

After playing around a little I came to sort of solution.

Perhaps you may achieve desired effect with javascript:

var h = document.getElementById("i_am_main_container").offsetHeight;
document.getElementById("i_am_sandbag_pusher").style.height = h + "px";

Upvotes: 1

Jainik Patel
Jainik Patel

Reputation: 2324

#i_am_main_container {
    width: 500px;
    height: 100%;
    display: table;
    background-color: rgba(200, 200, 100, .5);
}
#i_am_sandbag_pusher {
    width: 10px;
    height: 100%;
    float: right;
    margin-bottom: -100px;
    background-color: red;
}
.i_am_sandbag {
    background-color: yellow;
}
<div id="i_am_main_container">
    <div id="i_am_sandbag_pusher">
<div class="i_am_sandbag" style="width: 125px">I AM HERE</div>
    <div class="i_am_sandbag" style="width: 250px">TO MAKE IT FLOW AROUND</div>I AM HERE TO PUSH IT DOWN</div>
    
    <h1>I'M THE HEADER 1</h1>
    <p>I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum!</p>
</div>

Upvotes: 0

Related Questions