CODEWITHSUNDEEP
csscss-float
Fuzz
Fuzz

Reputation: 947

css : How can I grow a left floated div to 100%

Here is a jfiddle of what I want to accomplish

http://jsfiddle.net/fA2v8/

<div style="width:700px;border: thin solid black">
<div style="float:left;">
    <div style="border: thin solid green;width:400px;height:50px"></div>
    <div style="border: thin solid green;width:400px;height:50px"></div>
    <div style="border: thin solid green;width:400px;height:50px"></div>
</div>
<div style="float:left;">
    <div style="border: thin solid red;width:250px;height:100% "></div>
</div>
<div style="clear: both;"></div>
</div>

The red div's height should expand.

I want to have a div that expands to 100% of the height of its parent. because the size will not be known at runtime.

What am I doing wrong?

Upvotes: 2

Views: 101

Answers (3)

TimSPQR
TimSPQR

Reputation: 2984

You can also use jQuery if you can/want to. - FIDDLE.

JS

$('.rightdiv').css('height', $('.bigdiv').innerHeight());

Upvotes: 0

Fuzz
Fuzz

Reputation: 947

Ok, I got it to work with some fancy css. http://jsfiddle.net/fA2v8/7/

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    position: relative;
}
.left {
    width: 400px;
    float: left;
    border: solid thin blue;
}
.right-wrapper {
    width: 20px;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
    border: solid thin red;
}
.clear {
    clear: both;
    height: 0;
}
<div class="container">
    <div class="left">
        <div style="border: thin solid green;width:400px;height:50px"></div>
        <div style="border: thin solid green;width:400px;height:50px"></div>
        <div style="border: thin solid green;width:400px;height:50px"></div>
    </div>
  <div class="right-wrapper">
    <div class="right">test2</div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

Upvotes: 1

caniball
caniball

Reputation: 107

i think if you want your red-div to expand to 100% of the parent-DIV, the Parent DIV has to have "height" set:

<div style="float:left; height:120px;">
<div style="border: thin solid red;width:250px;height:100% "></div>
</div>

something like that...

Upvotes: 0

Related Questions