Search code examples
cssfixedfluidelasticlayout

CSS - Elastic layout, 1 fluid + 1 fixed column, center aligned


This CSS challenge is really puzzling me. Here's what I'm trying to do ...

  • have an elastic layout (i.e. the container is max-width: 1200px min-width: 960px)
  • have the container be center aligned.
  • where the left column is fluid and expands to the highest possible width in the elastic constraints.
  • and the right column is fixed to say 200px

Can anybody enlighten me?


Solution

  • The main part is keeping the left column stay fluid while the right is not.

    The left column should have a wrapper, that wrapper should have a margin-right of 200px; The left column should be 100% width;

    The right column should float right, have absolute positioning and have 200px of width.