CODEWITHSUNDEEP
htmlcss
Gabin
Gabin

Reputation: 1288

css floating element increase parent height but sibling with 100% height not working

I have a container with 2 children : one is floating and increasing his parent's height, the second is not floating and fill the rest of the width. I'd like to make the second filling the height also.

Here is a fiddle of my problem : http://jsfiddle.net/LAesa/

In this fiddle I'd like to make the red div filling 100% height of his parent.

Here the html : 

<div id="container">
    <div id="float">
        The floating <br/>column
    </div>

    <div id="fill">
        This one fill the rest
    </div>

    <div class="clearfloat"></div>
</div>

Here the css : 

#container {
    width: 500px;
    background-color: yellow; 
}

#float {
    width: 20%; 
    float: left; 
    background-color: green; 
}

#fill {
    min-height: 100%; 
    overflow: hidden; 
    background-color: red; 
}

.clearfloat {
    clear: both; 
}

Thank you very much !

Upvotes: 1

Views: 1554

Answers (2)

Kerry Liu
Kerry Liu

Reputation: 2162

Provided that you don't need to support older browsers you can also use the flexbox layout. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://caniuse.com/flexbox 

<div class="flex-container">
    <div id="left">
        The floating <br/>column
    </div>

    <div id="right">
        This one fill the rest
    </div>
</div>

And CSS:

.flex-container {
  display: flex;
  flex-flow: row no-wrap;
  justify-content: space-around;
  background: yellow;
  width: 500px;
}

#left {
    width:20%;
    background-color: green; 
}

#right {
    width:80%;
    background-color: red; 
}

http://jsfiddle.net/gwwar/KFmVJ/1/

Upvotes: 2

Milan and Friends
Milan and Friends

Reputation: 5610

Jquery solution, here's a Fiddle

$(function() {
  var fHgt = $('#float').outerHeight();

  $('#fill').css({ height: fHgt });
});

and here's a CSS solution

#container {
  display: table;
  width: 500px;
  background-color: yellow;
}
#float {
  display: table-cell;
  width: 20%;
  background-color: green; 
}
#fill {
  display: table-cell;
  width: 80%;
  overflow: hidden; 
  background-color: red; 
}

Upvotes: 1

Related Questions