8

I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is:

<html>
  <head>
    <style>
      body {
        padding: 20px;
        background-color: #c0c0c0 ;
      }

      #wrapper {
        border: 4px solid #9cf ;
      }

      #wrapper > div {
        display: inline-block ;
        height: 30px ;
        line-height: 30px ;
      }

      #content1 {
        width: 100px ;
        background-color: yellow ;
      }

      #content2 {
        width: 325px ;
        overflow: hidden ;
        white-space: nowrap ;
        background-color: blue ;
      }

      #content3 {
        width: 400px ;
        background-color: red ;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="content1">Content 1</div>
      <div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
      <div id="content3">Another piece of content</div>
    </div>
  </body>
</html>

You'll see that the #content2 div is pushed up relative to the #content1 and #content3 divs. I've a relatively strong reason to use the inline-blocks over floats in this situation, however if the only "fix" is to move to floats I'll have to get on with it, however I'd rather avoid that work if possible as, currently, time is short for our pilot test launch, in the long term the layout could be moved to floats.

Further more, I've tried to mess with margins and paddings to no success. In that messing I've established that it is the presence of overflow: hidden in #content2 that causes this line-break-esque distortion.

Any help much appreciated.

captainsac
  • 2,484
  • 3
  • 27
  • 48
Mike
  • 234
  • 1
  • 4
  • 12

1 Answers1

19

For inline-block I usually specify vertical-align:top to alleviate vertical alignment issues. And be aware that there will be horizontal gaps between the sibling divs that have inline-block, which can only be fixed by killing the literal whitespace in the HTML.

And I hope you are using a doctype.

Hope this helps, otherwise please setup a jsfiddle so I can visually see this.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • hey, thanks, I'll give this a shot. RE the white space, I generate the html server side with google closure templates and that removes all whitespace. – Mike Sep 24 '10 at 18:51
  • Sorry for exhuming this, but I've found after 5 years the same behaviour in Firefox and Chrome (https://jsfiddle.net/jhngc3uf/). Thanks for the workaround, but I would like to understand why that offset happens with overflow hidden? Is that normal behaviour or a bug? – Andrea Casaccia Mar 05 '15 at 20:39
  • I found an answer to this question here: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – Andrea Casaccia Mar 05 '15 at 21:14