Horizontal align two adjacent divs with left oriented text

Question

I want to horizontal align a div that consists of two other divs:

One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.

The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).

This pen describes what i tried to do using table layout

This is the HTML

<div class="container">
  <div class="centered">
    <div class="left">
      left text
    </div>
    <div class="right">
      very very very long right text
    </div>    
  </div>
</diV>

And the CSS

.container {
  width: 200px;
  background-color: red;
}

.centered {
  display: table;
  margin: 0 auto;
  max-width: 100px;
}

.left {
  background-color: green;
  display: table-cell;
  vertical-align: middle;
}

.right {
  background-color: blue;
  display: table-cell;
  vertical-align: middle;
}

As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it

so as i understand, you want the blue area to be dynamic , to change width depending on the length of the text inside it ? — Mihai T, Oct 10 '16 at 15:00
*" What i would like is the blue area to take the width of the longest line in it"* - you can't do that....that's not the way the line box model works. — Paulie_D, Oct 10 '16 at 15:02
Related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Oct 10 '16 at 15:06
@Paulie_D thx for the reference. So i have no way of aligning an image near a multiline text in a container without using JS? — Yoni Dor, Oct 10 '16 at 16:06
The left div is supposed to be an image (it is decribed in the question). i have used text to simplify the example. — Yoni Dor, Oct 10 '16 at 16:10

Huginn · Answer 1 · 2016-10-13T13:35:42.033

0

If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?

.container {
  width: 200px;
  background-color: red;
  padding:0 20px;
}

.centered {
  display: table;
  margin: 0 auto;
  max-width: 100px;
}

.left {
  background-color: green;
  display: table-cell;
  vertical-align: middle;
  color:#fff;
}

.right {
  background-color: blue;
  display: block;
  vertical-align: middle;
  width:inherit;
  color:#fff;
}

<div class="container">
  <div class="centered">
    <div class="left">
      left text
    </div>
    <div class="right">
      very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
    </div>    
  </div>
</div>

edited Oct 13 '16 at 13:35

answered Oct 10 '16 at 21:45

Huginn

480
2
6
21

nope, you removed the contraint of the centered div width (when it put it 100%). I want it to grow until a certain size and then break the rows of the right text. – Yoni Dor Oct 13 '16 at 07:28
I've updated the code above to mimic your codepen. Let me know if I'm understanding you correctly. – Huginn Oct 13 '16 at 13:36
So now you reproduced the issue: the space of the right of the blue box – Yoni Dor Oct 15 '16 at 10:05

Horizontal align two adjacent divs with left oriented text

1 Answers1