I want to create a two column layout where width of left column depends on screen width as follows:
when \[code\]0 <= screen width <= c\[/code\] left column width is \[code\]a\[/code\]
when \[code\]c <= screen width <= d\[/code\] left column width changes linearly from \[code\][a,b]\[/code\]
when \[code\]d <= screen width\[/code\] left column width = \[code\]b\[/code\]
and right column takes up whatever space is left. How can I do this with just css? This layout will be used in a map app, where left column displays search results, and right column displays the map.
