max-width doesn't work with float

Question

I'm trying to design a responsive page. I have 2 divs with the same height. They both have the max-width property and the max-width is working. Once I add the float:left property the max-width doesn't affect them.

Here's an example: jsfiddle

<div class="color1">
   Some Text
</div>
<div class="color2">
    Bla
</div>
<div style="clear: both;">

and the CSS:

div{
    height: 100px;
    float: left;
}
.color1{
    background-color: #6AC1FF;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    max-width: 100px;
}

I want them to be align vertically. Is there another way to make it other than float and keep the max-width?

Answer 1

Use defined width percentages and float: http://jsfiddle.net/dEEW5/3/

div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width: 20%;
    max-width:100px;
}

Use defined width percentages with inline-block: http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:20%;
    max-width:100px;
}

Inline-block where the 2nd block drops when it can no longer fit within the container instead of shrinking: http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 100%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:100%;
    max-width:100px;
}