1

I have been trying to adapt the basic responsive layout (out of w3schools) with a "row" div containing various "element" divs that may display side by side or one on top of the other depending on the media. Yet, my divs contain a variable amount of text and they are displayed top-aligned. I read everything I could find on StackOverflow and elsewhere but could not figure out how to make the least number of changes (with the least impact on the rest of the design) and get them aligned vertically in the middle or at the bottom.

Below is a sample starting point, removing everything unnecessary from this example. Could the three rectangle be middle-aligned or bottom-aligned without changing everything?

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<div class="row">
  <div class="column" style="background-color:#aaa;">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</div>
  <div class="column" style="background-color:#bbb;">Column</div>
  <div class="column" style="background-color:#ccc;">The quick brown fox jumps over the lazy dog </div>
</div>

I am pretty much a newbie, but whatever I read seems to be very much incompatible with the above layout strategy and to have plenty of side effects on the visual appearance, on the responsiveness, etc.

Paolo
  • 123
  • 6

0 Answers0