Looking for advice on using min-width and max-width

[Tauren Mills]

First off, I'm really happy with Emastic. Great work!

I'm working on a new project that has the requirement that the page
width be flexible between a minimum and maximum amount. I have an
influence in what those minimum and maximum widths can be, but the
site does need to be strechable.

I'd like to keep using Emastic since I'm familiar with it, but I don't
think this is the kind of thing Emastic is built for. Before I switch
to another css solution, I thought I'd ask for some ideas here.

I'm going to use a font-size of 75%, and was thinking that making the
site stretch between 75 and 85 ems would work well. That would give
the size a min-width of 900px and a max of 1020px. These would be
similar sizes to other stretchable sites. For instance, orkut.com
scales between min-width:920px and max-width:1003px.

I need a left hand sidebar that is of an exact width in ems. I have a
mockup of the site with a fixed width of 80em (960px) done like this:

<div class="main">
<div class="dl15">
<div>Sidebar</div>
</div>
<div class="dl65">
<div>Content</div>
</div>
<br class="clear" />
</div>

How would I make it so that the left sidebar stays 15em, but the right
content panel scales with the size of the browser window? But limit
the scaling so that the total width is between 75em and 85em?

Thanks in advance for any ideas!
Tauren

[vladocar]

If I understand the problem correctly you want flexible .main width
from 75 to 85em. And fixed sidebar of 15em.

You need .main{ max-width:85em; min-width:75em;}

You don't need 65em column you can use fluid. This solution will we
not work in IE6 and you need to put .main{ width:85em;} in the ie.css
file.

<div class="main">

<div class="dr15">

<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin
id, congue sed, euismod a, ante.

</p>
</div>
<div class="fluid">

<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin
id, congue sed, euismod a, ante.
Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id,
congue sed, euismod a, ante.
</p>
</div>

</div>