Here’s a couple CodePen’s where I’ve tried to duplicate a couple different ways what I’m after:
I’m using a 3rd party jquery plugin to display an image slider inside of the right content area (which should be fluid). The first example above using floats is what I’m after except for when the browser is resized, I’d expect the right column (which has a percentage max-width applied) to simply shrink and never get any closer to the left content as it has a static width. But, as you can see when you resize, the right content starts moving closer to the left content and eventually just drops below the left content when it runs out of room. How can I make the left content keep the 300px width and the right content not drop below the left but simply shrink and stay on the same line as the left content. Eventually once it shrinks far enough, I’ll add a media query and alter the layout.
The second CodePen is where I’ve attempted to do the exact same thing but with display: table. Admittedly, I’m more used to floats than display: table and as you can see, this layout isn’t working out. I’m not sure why it’s so wide for starters. I’ve tried adding some widths in for “.card” but nothing seems to get control of it. Could also be the 3rd party jquery plugin conflicting with something about display:table? Not sure.
Any help to get me to a point where both columns sit next to each other and the right shrinks as the browser shrinks.