Briefkasten Briefkasten - 5 months ago 19
CSS Question

Align two divs on same line without setting width

I can't find an example with two divs one aligned to the left and the other to the right which are on the same line without setting the

width
to them. I also need a responsive solution. Any ideas?



.left {
float: left;
}
.right {
float: right;
}

<div>
<div class="right">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
</div>
<div class="left">
The solution comes from the display property. Basically you need to make the two divs act like table cells. So instead of usign float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div...
</div>
</div>




Answer

You only need set the float: right if you do float first method, like it is currently. And the text will wrap below the image automatically. Don't forget to clear the floats by adding overflow: auto; to the container.

.container {
  overflow: auto;
}
.right {
  float: right;
}
<div class="container">
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
</div>

If you need the two divs to stay side by side without wrapping, you can add overflow: auto to the left div.

.container {
  overflow: auto;
}
.right {
  float: right;
}
.left {
  overflow: auto;
}
<div class="container">
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
</div>

Or using CSS table, like you mentioned in the text.

.container {
  display: table;
  width: 100%;
}
.left, .right {
  display: table-cell;
  vertical-align: top;
}
<div class="container">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl,
    nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna.
    Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
</div>