Home/ Questions/Q 6646139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:22:48+00:00

Feeling a bit frustrated at not being able to properly figure this out. I’m

  • 0

Feeling a bit frustrated at not being able to properly figure this out. I’m updating an old site and am trying to make this work without tables. I can do it with box flex but its unsupported by a lot of browsers. The layout is something like this

[col-1-as-small-as-possible][ col-2-should-use-all-space
][col-3-as-small-as-possible]

Columns don’t need to be the same height, and the overall width of all 3 columns combined is constrained by a parent.

If I use floats I can’t get the middle column to expand. The width of the col-1 and col-2 are not fixed widths.

Any solutions that don’t feel worse then the problem(tables)?

here’s an example of the table based solution: http://jsfiddle.net/7dsCV/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a strange solution, but setting overflow: hidden on the middle div will give you what I believe you want:

    http://jsfiddle.net/qrBXL/

    I’ve been meaning to figure out why this happens but haven’t gotten around to it yet. My best guess is that overflow only works on rectangular containers and floats wrapping within the div make it essentially non-rectangular.

    • 0