CODEWITHSUNDEEP
htmlcss
Corey Ogburn
Corey Ogburn

Reputation: 24717

Two divs side by side, the right one's width decided by its content, the left one takes up all available space?

In the right div I have an image and a link. The images that might load have a huge variety of aspect ratios (from 0.38 to 6.83) and I have no control over the source images but they need to have the proper aspect ratio. To do that, I've given it a max-width but all too often the image is thinner than that width.

I'm trying to get the first div (.owner-info-container) to take up all left over space in the parent that the second div (.primary-image-container) doesn't use. If the image doesn't take up the entire space allowed by max-width, I'd like the left container not leave that as white space.

I've messed with floating the second div right but if the first div's content gets too wide it won't break into a new line, it'll just push the second div down.

HTML

<div class="owner-address col-xs-12">
  <div class="owner-info-container">
    <h3>Address</h3><br/>
    <span class="owner-info">
      <span class="header">Owner Name</span><br/>
      <span>Name goes here</span>
    </span>
  </div>
  <div class="primary-image-container">
    <img />
    <a>Send us an updated photo</a>
  </div>
</div>

Upvotes: 2

Views: 254

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

You can accomplish this using flexbox.

If you assign display: flex; to your .owner-address class, and then give your .owner-info-container a flex-grow: 1;, it will take up the remaining space within the .owner-address.

CSS

.owner-address {
  display: flex;
}

.owner-info-container {
  flex-grow: 1;
}

JSFiddle

Upvotes: 1

Related Questions