please help me in setting height for div based on another div value

godmadeus

New member
Joined
May 4, 2017
Messages
31
Points
0
i have a div as below

<div class="first" style="height:300px">
<div class="subone"><img></img></div>
<div class="subtwo">text</div>
</div>

main div height is 300px and the div inside it have a image which have variable height images. and i want the below div height to auto adjust based on the image div height.

so all the main div "first" are looking equal height.
 

Marc van Leeuwen

Premium Member
Joined
May 29, 2016
Messages
1,132
Points
63
You wanted to have subtwo div same height with subone automatically?
sorry I had to reask because I really don't understand your question.
 

godmadeus

New member
Joined
May 4, 2017
Messages
31
Points
0
godmadeus
2017-05-19_18-56-37.png

see the images i have uploaded and in that the images are equal in height so all the grid is equal in height.
but if the image size increase or decreases than the grid size differ from other grids. so to maintain the grid, if the image size decrease that the below text area should auto adjust its height make it equal to others grids.

also for image we can set max-height so the image size increases should not affect other grids...

if you are not clear i will make some image and re explain you
 

nesir

Member
Joined
Jul 23, 2017
Messages
34
Points
8
If you have no heigh set for the "text div" at the bottom it will resize according to its parent div, that being said text does not resize in height and width like images , it breaks and will ad another line effectively lengthening your text if div, what you need is to use em value on your text instead of pixels. Text will usually overflow from divs , so trying the overflow hidden property may also help if maintain div but it will cut your text. Try em just set media queries for it when it gets too small .
 

ron13315

Member
Joined
Jul 23, 2014
Messages
283
Points
18
try to add this in your css


.subone {width: 100%;}
.subone img{width: 95%; height: 200px;}

it will force all your images inside subone class with 200px height.
 

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top