Home/ Questions/Q 9137105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:03:09+00:00

I found different suggestions on how to vertically align stuff using css. However, none

  • 0

I found different suggestions on how to vertically align stuff using css. However, none of those could handle what I wanted. Here is what I want:

In general I have some text that should fill the left half of some space and a picture that should be in the right half of the space.

If the height of the text is smaller than the picture both text and picture should vertically align at top of the space: 

TextTextText   PicturePicture
TextTextText   PicturePicture
               PicturePicture

If the height of the text is greater than the height of the picture, then the the text should vertically align on top and the picture at the middle relative to the text.

TextTextText
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText

Here is one straight forward way I tried (text-version without picture):

<div style="width: 100%">
  <div style="width: 50%; display: inline-block; vertical-align: top;">
    TextTextText <br>
    TextTextText <br>
    TextTextText
  </div><div style="width: 50%; display: inline-block; vertical-align: middle;">
    PicturePicture <br>
    PicturePicture
  </div>
</div>

However, the effect I intended was not achieved. The right inner div (Picture) is just aligned on top rather than in the middle relative to the text. There is no difference between setting vertical-align: middle and vertical-align: top. However, interestingly setting vertical-align: bottom makes a difference.

The outer div is contained in some other element of a certain width. However, I cannot specify this width by any fixed measure, e.g. px. Same for the two inner divs with equal width.

Making the inner divs table cells achieved the right vertical effect. However, I cannot use display: table-cell, since I need to make sure that the left inner div maintains its width even though the right inner div could have content that overflows to the right, like PicturePicturePicturePicturePicture.... This would lead to shrinking the width of the left cell, which I don’t want.

Furthermore, I do not know the height of the content, so none of the tricks for vertical alignment that use a fixed height works.

It seemed not an too uncommon task, but I was unable to find any solution. Is it possible to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not clear to me what behaviour you want when the picture is too wide for the right inner div, other than it should not affect the width of the left inner div, but does this meet your requirements?

    HTML.

    <div class="container">
  <div class="caption cell">
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text
  </div>

  <div class="picture cell">
    <div>
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>

    CSS

    .container {display:table; table-layout: fixed; width:100%; }
.cell { display: table-cell; width:50%; }
.caption { vertical-align: top; }
.picture { vertical-align: middle; }
.picture div { overflow-x:hidden; }

    JSFiddle at http://jsfiddle.net/92wcy/1/

    • 0