CSS: Shrink div width with window resize but maintain max-width?

Question

I have a large div, 1000px in width, that I want to fix up to expand and contract as follows:

If the user resizes their browser window to a width less then 1000px I want to resize that div accordingly (as if when you use width:100%;).

However, if the user expands their browser window to a width greater then 1000px I want the div to stop growing when it reaches 1000px.

I thought the best way would be to use a combination of width: 100% and max-width: 1000px; but this is not working for me.

Can anyone suggest a way to achieve this?

My full CSS for that div is:

#panel
{
  position: absolute;
  margin-left: 342px;
  max-width: 1000px;
  width: 100%;
}

Here's a [fiddle](http://jsfiddle.net/DRmtW/). Why is is absolutely positioned and why is there a margin? How do you need it positioned on the page? — Brigand, Feb 26 '13 at 01:11
@FakeRainBrigand thanks ill check it out. Margin and position are present for position with other divs on the page — MeltingDog, Feb 26 '13 at 01:14
Can you add some more HTML and update the fiddle? There's no reason to have the CSS you gave for #panel. Absolute position without setting top, left, right, or bottom doesn't make sense. And a margin with absolute positioning does nothing. If things inside it need to be positioned relative to it, set #panel to `position: relative` and those to `position: absolute`. — Brigand, Feb 26 '13 at 01:21

score 2 · Answer 1 · answered Feb 26 '13 at 01:07

2

Have you considered media queries? Something like:

#panel {
    /* ... */
    width: 100%;
}
@media all and (min-width: 1000px) {
   #panel {
     width: 1000px;
   }
}

That would apply a 100% width for screens narrower than 1000px and a fixed width of 1000px for screens at least 1000px wide.

answered Feb 26 '13 at 01:07

Lyza Gardner

Just so you know, that's the equivilent of what he has, if you remove the `position` and `absolute` lines. – Brigand Feb 26 '13 at 01:24

1 Answers1