Floated div, 100% height

Question

t

***** {

    -webkit-tap-highligh         


        

Answer 1

Why dont you use clear:both?

<div id="footer-gradient">
   ...
   <div class="clear"></div>             <!---- Inside footer-gradient div. -->
</div>

Css:

.clear{ clear:both; }

Answer 2

Like this

demo

css

    .footer{
   display:table;
    width:100%;
}
.col1{
    background-color:red;
    display:table-cell;
}
.col2{
    background-color:red;
    display:table-cell;
    padding:0 10px;
}
.col3{
    background-color:red;
    display:table-cell;
}

Answer 3

1. Set the three elements' container (#footer-gradient) display: table
2. And set the elements themselves (.col) display: table-cell
3. Remove the floating.
4. Success.

---

#footer-gradient {
    display: table;
}
#footer-gradient .col {
    display: table-cell;
    float: none;
}