How To Make Full 100% Height Of Floated Element?

I have the following html markup: As you can see right block looks ugly. How could I make right element fluid height 100%?

Solution 1:

Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.

.container {
  border: 1px solid green;
  position: relative;
  width: 100%;
}
.right {
  border: 1px solid #000;
  width: 40px;
  height: 100%;
  position: absolute;
  right: 0;
}
.left {
  display: block;
  border: 1px solid red;
  overflow: hidden;
  margin-right:40px;
}

<br><br><divclass="container"><divclass="right">Right</div><divclass="left-container"><divclass="left">
        Left fluid
        multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
    </div></div></div>

Solution 2:

If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.

HTML:

<divclass="container"><divclass="right">Right</div><divclass="left">
        Left fluid
        <br/>multiple rows
    </div></div>

CSS:

.container {
    display: flex;
    width: 100%;
    outline: 1px dotted gray;
}

.right {
    order: 2;
    flex: 00 auto;
    border: 1px solid green;
}

.left {
    flex: 10 auto;
    border: 1px solid red;
}

Solution 3:

add clear: both; after floated element.

<divclass="right"></div><divstyle="clear: both"></div>

Solution 4:

Add

html, body{
height: 100%;
min-height: 100%;
}

.your-container{
height: 100%;
}