CODEWITHSUNDEEP
css
Linas
Linas

Reputation: 4408

Div height in percentage, half parent height

I have two divs displayed next to each other, left div is 20% width and right is 80% width.

Now left div contains image which is resized horizontally so it's height is unknown and keeps changing.

Now when this div resizes parent height increases or decreases, so when that happens i need my right div to resize as well, how can i do that?

jsFiddle

Upvotes: 0

Views: 5481

Answers (3)

Charles-Édouard Coste
Charles-Édouard Coste

Reputation: 1682

You can try the CSS3 table-cell value on the display property : http://jsfiddle.net/UJYyw/5/

With

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

You just have to apply a table-cell display on div.one and div.two

.one, .two{
    display:table-cell;
}

Compliant browsers will adapt height of elements the way they do on td and th tags.

Upvotes: 2

gkond
gkond

Reputation: 4274

Here is the crossbrowser solution which uses just floats and couple of wrappers http://jsfiddle.net/RSPbD/

HTML

<div class="container">
    <div class="wrap1">
        <div class="wrap2">
            <div class="one">text in div one</div>
            <div class="two">text in div two</div>
            <div class="clear"></div>
        </div>
    </div>
</div>​

CSS:

.container{
    border:1px solid;
    width:70%;
    margin:50px;
    padding:10px;
}

.wrap1 {
    width: 25%;
    background: red;
    position: relative;
    left: 7%;
}

.wrap2 {
    width: 200%;
    position: relative;
    left: 100%;
    margin:0 -200% 0 0;
    background: blue;
}

.one{
    float: left;
    width: 50%;
    margin-right: -100%;
    position: relative;
    left: -50%;
}

.two {
}

.clear {
    clear: both;
    font-size: 0;
    overflow: hidden;
}

Upvotes: 0

user1211577
user1211577

Reputation:

You could use jQuery to do this.

$('.container').css({'height':$('.one').height()});​

See a jsFiddle here

When you change the value of .one in the css, it will update the size of .container, and thus, .two as well.

Upvotes: 1

Related Questions