Two columns - left static - right fluid

Here’s a couple CodePen’s where I’ve tried to duplicate a couple different ways what I’m after: (using floats) (using display: table)

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.


<div id="left">fixed</div>
<div id="right">fluid</div>

1 Like

Well… it’s been quite a while since I’ve really used CSS, but I didn’t think I was THAT rusty… I was making that waaaaay more difficult than need be. I’ll go sulk in the corner now after wasting an hour or so trying to get this to work and failing. :slight_smile:

Thanks a lot.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.