Search code examples
csssusysusy-sass

Fixed width sidebar and fluid width main content area with susy

I have a pretty simple two column layout where the left column is for main content and the right column is a sidebar, which contains some 300x250px ads. My issue is that I want the sidebar to always be the same width so that it won't cut off my ads (they can't be resized). However, I'm finding it difficult to achieve this using susy. Below is a screenshot of the layout.

layout image

Any ideas?

Solution

  • What you are describing doesn't need a layout framework—a floating div with a width will make the sibling be fluid. You could be more explicit with CSS calc: https://css-tricks.com/a-couple-of-use-cases-for-calc/

    width: calc(100% - 300px);