CODEWITHSUNDEEP
htmlcss
Pied Piper
Pied Piper

Reputation: 61

force div to bottom

I want the green div to be below the blue div instead of on top of it without changing either of their position values and using pure css only.

http://jsfiddle.net/LpjgLydv/40/

Is this possible?

Assumptions:

  1. I may use inline css only
  2. This is for a footer that needs to stay at the bottom regardless of how much content is on the page
  3. Any other element on the page besides the footer (and html,head,body) may or may not exist at any given time
  4. The footer is nested in <body> and cannot be placed anywhere else

Upvotes: 1

Views: 6349

Answers (2)

Pied Piper
Pied Piper

Reputation: 61

I figured it out. Basically I had to add a relative position and a min-height to the html attribute as well as a margin-bottom to the body attribute:

http://jsfiddle.net/LpjgLydv/44/

html

<html>
    <head>

    </head>
    <body>
        <div class="box"></div>
        <div class="box2"></div>
    </body>
</html>

css

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 250px;
}
.box
{
    border: solid 10px blue;
    position: relative;
    height:900px;
    width:380px;
    margin-top: 5px;
    margin-left: 8px;
}
.box2
{
    border: solid 10px green;
    position: absolute;
    bottom:0px;
    left:8px;
    height: 180px;
    width: 380px;
}

It now meets the criteria of all of the assumptions in the question.

Upvotes: 0

Makis
Makis

Reputation: 1244

You can use this without positioning.

.inner-box
{
    border: solid 10px blue;
    height:900px;
    width:380px;
    margin-top: 5px;
    float:left;

}
.inner-box2
{
    border: solid 10px green;
    float:left;
    bottom:0px;
    height: 180px;
    width: 380px;
    clear:both;
}

Upvotes: 1

Related Questions