CODEWITHSUNDEEP
htmlcss
nicholaschris
nicholaschris

Reputation: 1401

Using vertical-align property to align div to top AND bottom of siblings (keep divs same height)

I have the following HTML and CSS code and a JSFiddle example

I would like to know whether or not I can use the vertical-align CSS property to keep the div which has more text in alignment with the other divs when the browser window is resized. Currently when the browser window is resized the div with more text extends down or up depending on whether vertical-align is set to top or bottom.

In other words the height of the div with more text increases and the others do not. How can I keep the heights of the yellow divs equal without setting height property?

<div class="red-box">
  <div class="yellow-box">
    <img src="">
     <h1>heading one</h1>

    <p>Little text one</p>
  </div>
  <div class="yellow-box">
    <img src="">
     <h1>heading two</h1>

    <p>Little text two</p>
  </div>
  <div class="yellow-box">
    <img src="">

     <h1>heading three</h1>

    <p>Lots of text that
        just keeps on going and going</p>
  </div>
</div>

and CSS:

.red-box {
  background:red;
}

.yellow-box {
  background: yellow;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-block;
  width: 33%;
  text-align: center;
  vertical-align: bottom;
  /* vertical-align: top; */
}

Upvotes: 1

Views: 5240

Answers (3)

Sourabh
Sourabh

Reputation: 8482

vertical-align property works with table-cell and inline level elements. inline level means inline, inline-block and inline-table.

As you have display: inline-block on the divs (default being block), you can use vertical align.

But I am not sure what you want to achieve.

+ w3 | vertical-align

Upvotes: 0

riverstorm
riverstorm

Reputation: 548

Tables are long deprecated for layout purposes, but they are still good for tabular data. Your example seems to be some kind of tabular data, so you could consider using a table. Otherwise you will have to use heights: 100% height for the yellow boxes should do the trick.

Upvotes: 0

MarkP
MarkP

Reputation: 481

try changing the display property of .yellow-box to...

display: table-cell;

Upvotes: 1

Related Questions