CODEWITHSUNDEEP
jqueryhtmlcss
Mike Feng
Mike Feng

Reputation: 833

Make div's height 100% of parent element with other div children with float

I'm trying to create a row of children elements with equal height. However, the children elements contain images of variable height, so the height should be that of the tallest element. Imagine the following:

<div class="parent">
    <div class="child"><img /></div>
    <div class="child"><img /></div>
    <div class="child"><img /></div>
    <div class="child"><img /></div>
</div>

This is the CSS:

.child {float:left;width:25%}

Visual description .

I understand this can be done with javascript. However that's out of the question for me (at least I think so) because this is part of an overall responsive design, so the width of the children, while set at 25%, will change with different screen sizes to, say, 50%.

Thanks in advanced!

Upvotes: 0

Views: 746

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now try to this 

 *{box-sizing:border-box;}    
.parent{
display:table;
  width:100%;
  background:red;
 padding:5px;
}
.child{
display:table-cell;
  background:blue;
  width:25%;
}
   .child + .child{border-left: 5px solid red;}
<div class="parent">
    <div class="child">demo </div>
    <div class="child">text <br/>demo text</div>
    <div class="child"></div>
    <div class="child">hello <br/>hello<br/></div>
</div>

Upvotes: 0

Dylan Watt
Dylan Watt

Reputation: 3387

In in the traditional document flow, parents either size their children or are sized by them, they can't normally do both.

That is without flexbox. If you deal with the modern browser requirement, it's the solution you need. http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback is a good example of how to do these type sizings.

Upvotes: 1

Thi Tran
Thi Tran

Reputation: 701

Set child height if you expect these children elements have the same height

.child {float:left;width:25%; height: 100px; display: block;}

Set max-height for img inside .child

.child img {max-height: 100px;}

Upvotes: 0

Related Questions