CODEWITHSUNDEEP
htmlcss
Ronaldo
Ronaldo

Reputation: 367

liquid layout with two columns and a footer

I'm trying to build a liquid layout with two columns and a fixed footer at the bottom. I already take some help here, and I have one example above.

http://jsfiddle.net/kpDDM/18/

The problem on my example is that it has a fixed height. When I move to 100% heigh on my content div, the content collaps.

Upvotes: 0

Views: 122

Answers (1)

AdityaSaxena
AdityaSaxena

Reputation: 2157

Do you need something like this : http://jsfiddle.net/kpDDM/44/

HTML

<div class="all">
    <div class="content">
      <div class="left">&nbsp;</div>  
      <div class="right">&nbsp;</div>
    </div>
    <div class="footer"></div>
</div>

CSS

.all {
    position: relative;
    height: 100%;
    width: 100%;
}

body,html{
    height:100%;
}

.content {
    display:inline-block;
    height: 90%;
    width: 100%;
}

.left {
    display: inline-block;
    float: left;
    width: 60%;
    height: 100%;
    background-color: red;
}

.right {
    display:inline-block;
    float: left;
    width: 40%;
    height: 100%;
    background-color: blue;
}

.footer {
    display: inline-block;
    width: 100%;
    height: 10%;
    background-color: green;
}

Explanation

The problem is that the body tag does not have 100% itself. You have to assign that to body and then it'll work. In the above example I assumed that the content + footer share 100% of the height. 90% + 10%

Upvotes: 1

Related Questions