CODEWITHSUNDEEP
htmlcss
user1261774
user1261774

Reputation: 3695

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

Upvotes: 0

Views: 106

Answers (5)

clickbait
clickbait

Reputation: 2998

Make the .wrapper have position: relative.

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

Upvotes: 0

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 1

user3497034
user3497034

Reputation:

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.

Upvotes: 0

Andrew Lerma
Andrew Lerma

Reputation: 39

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/

Upvotes: 0

user2755140
user2755140

Reputation: 2027

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.

Upvotes: 1

Related Questions