CODEWITHSUNDEEP
htmlcsscss-tablestablerow
Kawd
Kawd

Reputation: 4450

How do I distribute rows of varying heights evenly when parent height is 100%?

Below I have 3 rows (.child) with different heights.

The height of the parent (#parent) cannot be known in advance and it will actually change if the height of its parent (the parent of #parent) changes.

Is there some CSS combination that I could use that would set the margins between those rows in such a way that the rows are spread out evenly on the vertical ?

Similar to when we have cells with different widths that we want to spread out evenly on the horizontal. This is easy to achieve by using display: table-cell; I believe, even if the width of their parent is unknown.

JSFIDDLE : http://jsfiddle.net/7ty82k3b/5/

CSS : 

#parent {
   display: table;
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 93px;
  background-color : red;
}

.child {
   position : relative;
   float: left;
   clear: both;
   border: 1px solid blue;
   display: table-row;
   width: 91px;
}

span.child {text-align:center;}

HTML : 

<body>
    <div id="parent">
     <img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
     <span class="child">Hey!</span>
     <img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
  </div>
</body>

Upvotes: 0

Views: 1110

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1454

Wrap your .child inside some .row so you can display the .row as a table-row and the .child as a table-cell and then vertical-align: middle them. Also, keep in mind that images are crybabies that won't handle very well "exotic" displays, so don't try to display them as table-row or table-cell.

#parent {
  display: table;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 93px;
  background-color: red;
}
.row {
  display: table-row;
}
.child {
  position: relative;
  border: 1px solid blue;
  display: table-cell;
  vertical-align: middle;
}
span.child {
  text-align: center;
}
<div id="parent">
  <div class="row">
    <div class="child">
      <img src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
    </div>
  </div>

  <div class="row"> <span class="child">Hey!</span>

  </div>
  <div class="row">
    <div class="child">
      <img src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions