0

I have, as in the fiddle below, justified, equally spaced divs which grow/shrink dynamically with window size. Everything works great until you add enough text to one of the divs, and cause it to wrap. In the fiddle below, uncomment to see the effect.

http://jsfiddle.net/jspyx21z/1/

Here's a basic idea of the effect, visually. Without much text:

|Hello--------|    |Hello--------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|

But when text is added:

|Hello How are|
|you doing?---|    |Hello--------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|
                   |-------------|

The boxes to the right drop down.

The behaviors which are important to me is that the boxes must:

  • Grown and shrink with the window, to a maximum & minimum height.
  • Wrap down if the window gets too small
  • Flexbox is not an option, in this case. While I love new CSS options, this needs to be at the very minimum IE9 compatible. Ideally, IE8. Extra super if we can get IE7 working.
  • Please, no libraries

Could anyone explain why this is happening, and perhaps provide some insight on how to fix it? Thankyou!

smts
  • 3,585
  • 1
  • 16
  • 14
  • Also have a look at: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – Hashem Qolami Oct 13 '14 at 18:28
  • Thankyou for drawing my attention to this previous posting. If it's alright, I will leave this question up, as I did do several searches beforehand and the linked question never came up in results. Perhaps, between the two questions, others will be able to find an answer, besides, the answer provided here is much more concise. :) – smts Oct 14 '14 at 16:01

1 Answers1

1

You need to add the following style to your CSS:

.box_fourth {
     vertical-align: top;
}

DEMO

smts
  • 3,585
  • 1
  • 16
  • 14
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36
  • Concise, easy, with a a demo, and it works. Go you. Thankyou! – smts Oct 14 '14 at 16:02
  • Also, for those who are interested, now that I know what to research, it seems that for inline block elements, the default value for `vertical-align` is `baseline`. – smts Oct 14 '14 at 16:05