Vertically align floating div to an unknown sized div

Question

I have a div of unknown size and another div (with CSS rotated text) floating beneath each other. I am now trying to move the text to the vertical middle, but I don't get it to work.

<div id="wrapper">
    <div id="unknownSizeDiv"> ... </div>
    <div id="rotatedTextDiv"> ... </div>
</div>
<div id="wrapper">
    <div id="unknownSizeDiv"> ... </div>
    <div id="rotatedTextDiv"> ... </div>
</div>

Or in big: http://jsfiddle.net/229mvsdb/

It should look like this aftwards:

I tried working with the solution given here: Vertically & horizontally align text after CSS rotation
But its just for divs of known size.

And this one: How to vertically middle-align floating elements of unknown heights?
Should work for my problem I think, but as you can see in the jsfiddle, its not.

it has to be pure css. (but with no compatibility for old browsers) — Robert, Apr 07 '15 at 21:47
That way you are out of luck =(. I wanted to ask you about if float was a requirement. Floats don't obey vertical-align rules. Either you use known div heights, or you have to switch to display: inline-block — Alexey, Apr 07 '15 at 21:49
Second comment - if online-block is an option for you, I would be glad to help =) — Alexey, Apr 07 '15 at 21:52
Thanks for your great involvement Alexey! :) I know thats not a good reply: but I'm new to the whole CSS thing so I don' know if `display: inline-block;` is also okay. If I can do the same as with `float` right now, yeah: why not? — Robert, Apr 07 '15 at 21:59

Ejaz · Accepted Answer · 2015-04-07T22:03:06.647

It is achievalbe using pure CSS. Here's what you're going to do with your CSS.

     .paragraphWrapper{ position: relative; } /*so that its absolutely positioned children calculate their offset wrt this element*/
     .paragraphWrapper:after{ content: ''; display: table; clear: both; }
     .paragraphWrapper > div{
        display: inline-block;
        vertical-align: middle;
     }
     .paragraph{
        border: 1px dashed #ccc;
        float: left;
        clear: both;
        margin: 5px;
        margin-bottom: 50px;
        width: 415px;
     }
     .paragraphMetaInfo{
        position: absolute;
        top: 50%;
        left: 405px;
        /*move them 50% of text's width towards top to get properly centered*/
        -moz-transform: rotate(90deg) translate(-50%, 0);
        -o-transform: rotate(90deg) translate(-50%, 0);
        -webkit-transform: rotate(90deg) translate(-50%, 0);
        transform: rotate(90deg) translate(-50%, 0) /*as pointed out by Shikkediel*/
     }

So the whole `.paragraphWrapper > div` part isn't needed with your solution, right? http://jsfiddle.net/uxqc5p42/ — Robert, Apr 07 '15 at 22:10
No, omitting that rule doesn't have any effect on the output. — Ejaz, Apr 07 '15 at 22:14

score 1 · Answer 2 · answered Apr 07 '15 at 22:13

Your following rule doesn't have any effect:

.paragraphWrapper > div {
    display:inline-block;
    vertical-align:middle;
}

because the <div> child elements are being floated. Therefore the computed value of display would be block.

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — display, position, and float — interact as follows:

[...] Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below. [...]

+---------------------------------------------------------------+--------------------+
|                        Specified value                        |   Computed value   |
+---------------------------------------------------------------+--------------------+
|   inline, table-row-group, table-column, table-column-group,  |                    |
|   table-header-group, table-footer-group, table-row,          |       block        |
|   table-cell, table-caption, inline-block                     |                    |
+---------------------------------------------------------------+--------------------+

Actually, there's no real way to align floated elements vertically. But if using inline-blocks is an option, the following could be a good starting point:

.paragraphWrapper {
    margin-bottom: 50px;
}

.paragraph {
    border: 1px dashed #ccc;
    margin: 5px;
    width: 415px;
}

.paragraphWrapper > div {
    display: inline-block;
    vertical-align: middle;
}

.paragraphMetaInfo {
    -webkit-transform: rotate(90deg) translateY(50%);
    -moz-transform: rotate(90deg) translateY(50%);
    -ms-transform: rotate(90deg) translateY(50%);
    -o-transform: rotate(90deg) translateY(50%);
    transform: rotate(90deg) translateY(50%);
    writing-mode: tb-rl;
}

<div class="paragraphWrapper">
    <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div>
    <div class="paragraphMetaInfo" id="paragraphMetaInfo_0">1. Paragraph
        <br/>64 Words</div>
</div>
<div class="paragraphWrapper">
    <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="paragraphMetaInfo" id="paragraphMetaInfo_1">2. Paragraph
        <br/>184 Words</div></div>
    <div class="paragraphWrapper">
        <div class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="paragraphMetaInfo" id="paragrapheMetaInfo_2">3. Paragraph
            <br/>214 Words</div></div>

Vertically align floating div to an unknown sized div

2 Answers2