CODEWITHSUNDEEP
htmlcss
Erik
Erik

Reputation: 14750

How to make full 100% height of floated element?

I have the following html markup:

.container {
  border: 1px solid green;
}
.right {
  border: 1px solid #000;
  float: right;
  width: 40px;
}
.left {
  border: 1px solid red;
  overflow: hidden;
}
<div class="container">
  <div class="right">Right</div>
  <div class="left-container">
    <div class="left">
        Left fluid
        <br/>
        multiple rows
    </div>
  </div>
</div>

As you can see right block looks ugly. How could I make right element fluid height 100%?

Upvotes: 0

Views: 1856

Answers (4)

Vnz Dichoso
Vnz Dichoso

Reputation: 182

Add

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

.your-container{
height: 100%;
}

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

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><div class="container">
  <div class="right">Right</div>
  <div class="left-container">
    <div class="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>

Upvotes: 2

DRD
DRD

Reputation: 5813

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

HTML:

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

CSS:

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

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

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

Upvotes: 2

DasBoot
DasBoot

Reputation: 479

add clear: both; after floated element. 

<div class="right"></div>
<div style="clear: both"></div>

Upvotes: 0

Related Questions