Elements won't stay inline in Google Chrome next to Twitter Widget

Question

I'm trying to keep three squares vertically aligned. The third element is a twitter widget. I'm running Ubuntu 12.04 and the two squares seem to shift downwards in google chrome. All other browsers seem to render this correctly (with them all inline).

I've tried removing white space, looking deeper into my source, etc., but even this simple jsfiddle seems to have the same issue.

What's up?

http://jsfiddle.net/bwzGC/

HTML

<div id="info-block">
    <div id="twaewsit-content">
        <span class="header">This Week @ EWSIT</span>
    </div>
    <div id="ue-content">
        <span class="header">Upcoming Events</span>
    </div>
    <div id="twit-content" style="border:none !important;">
        <a class="twitter-timeline" href="https://twitter.com/EWSITGOGREEN" data-widget-id="362066477261680640">Tweets by @EWSITGOGREEN</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>          
</div>

CSS

#info-block {
    padding:20px 0 20px 0;
    width:100%;
    text-align:center;
}

#info-block > div { 
    height:250px;
    width:30%;
    max-height:250px;
    overflow-y:hidden;
    display:inline-block !important;
    border:1px solid #e8e8e8;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    font:normal normal normal 12px/16px "Helvetica Neue",Arial,sans-serif;
}

#info-block > div > .header {
    display:block;
    padding:8px;
    font-weight:bold;
    font-size:14px;
    text-align:left;
    border-bottom-style:solid;
    border-bottom-color:#e8e8e8;
    border-bottom-width:1px;
}

Adrift · Accepted Answer · 2013-07-31T00:35:30.517

2

One option is to add vertical-align: bottom; to #info-block > div

#info-block > div {
    height: 250px;
    width:30%;
    max-height:250px;
    overflow-y:hidden;
    vertical-align: bottom;
}

http://jsfiddle.net/bwzGC/2/

edited Jul 31 '13 at 00:35

answered Jul 31 '13 at 00:28

Adrift

58,167
12
92
90

1

Well that was quick and easy. :) Thanks! Any reason why that worked? – Freesnöw Jul 31 '13 at 00:30
1

It's due to the fact that `inline-block` elements have a default `vertical-align` value of baseline. [This](http://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath/17905828#17905828) recent answer gives a good explanation of `baseline` - also take a look at http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align – Adrift Jul 31 '13 at 00:32

score 2 · Answer 2 · edited May 23 '17 at 12:05

I came across something similar the other day and looked into the causes a little.

As Adrift pointed out this is due to the vertical-align of the inline-block elements. Specifically it seems to be related to the baseline value which inline-block elements use by default and the fact you also have overflow-y:hidden set.

There seems to be a rendering difference between Webkit browsers (I see the boxes pushed down in Chrome, Safari and Opera 15) and others (Firefox and Opera 12 have the boxes aligned to the top) when vertical-align:baseline and overflow:hidden are applied. Removing the overflow-y css gives me the same results (boxes pushed down) in both Firefox & Chrome. Per the W3C CSS 2.1 Specification:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

So it seems like Gecko is rendering according to the specification in this case whereas Webkit is not.

score 1 · Answer 3 · answered Jul 31 '13 at 00:32

1

Float the 3 divs left and you will be fine

EXAMPLE

#twaewsit-content,#ue-content,#twit-content{
     float:left !important;   
}

answered Jul 31 '13 at 00:32

Thanos

3,039
2
14
28

Elements won't stay inline in Google Chrome next to Twitter Widget

3 Answers3