CODEWITHSUNDEEP
csshtmlrow-height
James
James

Reputation: 591

height of 2 rows and 2 merged rows using div

Basically I want to achieve this using DIV:

---------------
|one   |       |
|------| three |
|two   |       |
----------------

where height of 'three' matches height of 'one' and 'two'.

The code I have:

<div class="detail-main">
    <div class="detail-leftcol">
        <div class="detail-one">
            This is One         
                       </div>
        <div class="detail-two">
            This is Two
        </div>
    </div>
    <div class="detail-three">
        This is Three
    </div>
</div>

CSS:

div.detail-main    {
     position:relative;
     width:500px;
}

div.detail-leftcol
{    
    float:left;    
    width:250px;
}

div.detail-one    {
    border: thin solid;
    margin-bottom:2.5px;
}

div.detail-two    {
    border: thin solid;
    margin-bottom:2.5px;
}

div.detail-three    {
    border: thin solid;
    float:right;
    width:245px;
    margin-left:2.5px;
}

The result I'm getting is this:

|-----------------|
|One     | Three  |
|------------------
|Two     |
----------

What should be changed to Three to be in line with height of One and Two put together?

Help would be great!

Upvotes: 1

Views: 2818

Answers (2)

Robert Niestroj
Robert Niestroj

Reputation: 16151

Without changing your markup you can use jQuery like this: 

var detail1Height = $(".detail-one").outerHeight();
var detail2Height = $(".detail-two").outerHeight();

$(".detail-three").height(detail1Height + detail2Height + 1);

Here is a demo: http://jsfiddle.net/rniestroj/M4tpx/

Upvotes: 1

sandeep
sandeep

Reputation: 92863

You can write like this:

HTML

<div class="left">
    <div class="one">one</div>
    <div class="two">two</div>
</div>
<div class="three">one</div>

CSS

.left, .three{
    display:table-cell;
    width:100px;
}
.three{background:red;}
.left > div{
    height:100px;
    background:green;
}
.left .two{background:blue}

Check this http://jsfiddle.net/suNUK/4/

Upvotes: 2

Related Questions