Is there a way to use CSS to automatically adjust the height of both the right and left <div> elements so they fill the background-color based on the greater height, without setting a specific height for either?
The left <div> can vary in height depending on the content provided.
I attempted using height: 100%, but it did not produce the desired result.
It is necessary to utilize the float property and avoid table / table-cell properties.
I came across a discussion where suggestions involved defining a height value. However, my goal is to achieve this without specifying a fixed height.
Below is the structure of my HTML:
<div class="wrapper">
<div class="photo">
//image dimensions restricted by css rules
<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 corresponding CSS:
.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;
}
Current visual representation of the layout is as follows: