Expand the div height to match the other one

Question

Using CSS, how do I expand / fill the <div> height of both the right & left <div> (determined by the <div> with the greater height) with the background-color when there is no height set to the left or right <div>.

Depending on the amount of data supplied, the left <div> can be any height.

I have tried height: 100%, but this does not work.

I have to use the float property - so I cannot use table / table-cell properties.

I have read this post that expands the width, but the accepeted answer has a defined height value. All other examples seem to have a defined height value.

Here is my HTML code:

<div class="wrapper">
    <div class="photo">
        //image has max-height: 149px & max-width: 149px; assigned in the css file
        <img class="photo_dimensions" src="{{ name_details_photograph_url }}" />
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />
    </div>
</div>

Here is my CSS code:

.wrapper {
    width:100%;
    height:100%;
    border:1px solid;
}
.photo {
    height: 100%; 
    background:blue; 
    float:right;
    vertical-align:top;
    text-align:center;
    padding:2px;
}
.photo_dimensions {
    max-height: 149px;
    max-width: 149px;
}
.details {
    width:auto;
    height:auto;
    background:red;
    overflow:hidden;
    vertical-align:top;
    text-align:left;
}

Here is a visual display of what I currently have:

enter image description here

If your only concern is the background color below the `photo` why not just add background color to the wrapper div? — Flame of udun, Jun 13 '15 at 02:17

score 1 · Answer 1 · answered Jun 11 '15 at 23:17

1

You can emulate a table layout with non-table elements:

<div style="display:table">
    <div style="display:table-cell"></div>
    <div style="display:table-cell"></div>
</div>

That way the wrapped div's will be like table cells with same height.

answered Jun 11 '15 at 23:17

user2755140

1,917
4
13
16

Dasein A - My mistake - I cannot use tables as I must use the float property - I have updated the question. – user1261774 Jun 11 '15 at 23:28

Stickers · Accepted Answer · 2015-06-13T02:08:43.630

If you only need the background to expand, set it on .wrapper instead.

JsFiddle Demo

.wrapper {
    background: yellow;
    overflow: auto;
}
.photo {
    float: right;
}
.details {
    background: pink;
    overflow: auto;
}

<div class="wrapper">
    <div class="photo">
        <img src="//dummyimage.com/100"/>
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q
    </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

Make the .wrapper have position: relative.

Related: How to make a floated div 100% height of its parent?

edited May 23 '17 at 12:19

Community

1
1

answered Jun 11 '15 at 23:13

clickbait

2,818
1
25
61

Narawa Games - I have to have the two different background colours. – user1261774 Jun 11 '15 at 23:15
http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent! – clickbait Jun 12 '15 at 13:44

Andrew Lerma · Answer 4 · 2015-06-12T00:17:53.360

0

updated to redefine the .wrapper height to inherit a value from .details using jQuery Updated jsfiddle: http://jsfiddle.net/0doo7L6L/1/

Is this what you're looking for? You must define a height for html & body for a height 100% to inherit a value

html,body {
height: 100%; 
}

http://jsfiddle.net/0doo7L6L/

edited Jun 12 '15 at 00:17

answered Jun 11 '15 at 23:17

Andrew Lerma

39
5

Andrew Lemma - this will expand the height to more than the height of the tallest div. – user1261774 Jun 11 '15 at 23:51

score 0 · Answer 5 · answered Jun 12 '15 at 07:17

You need to go with static hight div height. Please try following updated code.

<!DOCTYPE html>

.wrapper { width:100%; height:100%; border:1px solid; } .photo { height: 150px; background:blue; float:right; vertical-align:top; text-align:center; padding:2px; } .photo1{ height: 150px; background:red; float:left; vertical-align:top; text-align:center; padding:2px; }

.photo_dimensions { max-height: 149px; max-width: 149px; } .details { width:auto; height:auto; background:red; overflow:hidden; vertical-align:top; text-align:left; }

//image has max-height: 149px & max-width: 149px; assigned in the css file Q
Q
Q
Q
Q
Q
Q
Q

</body>

Right side we have consider 2 Div 1) Full height & width and set the back-ground. 2) Place photo and its child DIV of first one.

Expand the div height to match the other one

5 Answers5