user1261774 user1261774 - 5 months ago 11
HTML Question

Expand the div height to match the other one

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

Answer

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>

Comments