0

I'm trying to get this div to show up as the proper height (without manually setting the height to a fixed number such as 75px).

So that it looks like:

------------------------------------------
| something | something else             |
------------------------------------------

https://jsfiddle.net/2fLr6enx/

I use float on the left div, so that it will always pull left and have the left div and right div on the same line (even if the right div is a very large image).

This, however, can make the div container smaller in height than the left div (it matches the height of the container to the right div)

I have tried to make this work with inline-block, table-cell, and other css, however cannot get it to work where they are both definitively on one line, and the height of the container contains both of them.

How would I achieve this?

space_food_
  • 800
  • 1
  • 7
  • 23
  • Does this answer your question? [How do I keep two side-by-side divs the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height) – Pbk1303 Jan 25 '20 at 01:43
  • https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height – Pbk1303 Jan 25 '20 at 01:43

1 Answers1

0

Flexbox are wonderful for this kind of issues. Just replace your 

.container {
   ...
   display: block;
   ...
}

with

.container {
   ...
   display: flex;
   ...
}
Jackh4l
  • 128
  • 8
  • doesn't flex have limited functionality on browsers that would cause issues depending on their phone or browser? – space_food_ Jan 25 '20 at 01:08
  • 1
    As far as I know, `flexboxes` are fully supported by every browsers now. Check this out for more details : https://developer.mozilla.org/en-US/docs/Web/CSS/flex – Jackh4l Jan 25 '20 at 01:21