0

I have a wrapper <div class="large"> that contains 3 columns (<div>s). All <div>s including a wrapper <div class="large"> have fixed height and width.

My problem is that when I start to fill these 3 columns with different content then they tends to shift down depending on their content.

How do I maintain default position of these columns inside wrapper <div class="large"> no matter what they contain?

Here is my Codepen: https://codepen.io/anon/pen/Qapapx

.large {
  border: 1px dashed;
  width: 1024px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.side {
  width: 300px;
  height: 220px;
  border: 1px dashed blue;
  display: inline-block;
}

.main {
  width: 342px;
  height: 250px;
  border: 1px dashed orange;
  display: inline-block;
}
<div class="large">
  <div class="side">
    efsdfvsdf
  </div>
  <div class="main">
    dsfgfdsdfsdffds<br> sdddsds
    <br> dsssdfsdsdds
  </div>
  <div class="side">
    sdfsdffds<br> sdfads
  </div>
</div>
marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
Alexandra Lvova
  • 11
  • 2
  • Your question doesn't seem entirely clear to me, but if it's an issue regarding the `vertical-alignment` of the elements in question have you considered declaring `vertical-align: top` to the nested *inline-block* elements? e.g: `.large div { vertical-align: top; }` – UncaughtTypeError Dec 28 '17 at 14:51
  • @UncaughtTypeError yes, I would like to know how to make these collumns vertically aligned either to the top or bottom border of their wrapper div. It is working, I thought `vertical-align: top;` is obsolete and shouldn't be used anymore. Thanks – Alexandra Lvova Dec 28 '17 at 14:59
  • Not all, there is no indication of that, see: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align (typically you would see a **deprecation** notice). – UncaughtTypeError Dec 28 '17 at 15:02

0 Answers0