width y min-width

Buenas:

Busque en el foro algo relacionado a esto, pero la busqueda no dio sus frutos. Tengo la página web donde quiero que, a partir de un tamaño ya no se adapte a la pantalla, es decir, tener ún tamaño minimo definido dentro del css, pero que si esta pantalla aumenta se adapte. Para esto éstuve intentando jugar con width y min-width; me explico:

Dentro de la página web tengo definido el body en el css, ademas de este tengo un div que me coge toda la página creando un cuadro un poco mas pequeño que el propio tamaño del body.

Ej:

body {
width: 100%;
height: 500px;
}

div {
width: 800px;
height: 450px;
}

Lo tengo asi para crear un efecto dando un color de fondo al body y otro (este con transparencia) al div.

El problema es que, cuando agrando la página el div no se ajusta con ella, y si le doy un widht: 80%; al div, al encojerse la página este tambien se encoje cuando la verdad quiero que tenga el minimo de 800px; intente colocar min-width y width juntos, pero el navegador solo interpreta uno de esos dos.

¿Como puedo hacer para que a partir de cierta resolucion la página se quede con un tamaño definido y si la resolucion aumenta esta tambien lo haga?

Hola!

Intentaste con un orden específico? Las propiedades se sobreponen unas a otras dependiendo del orden:

min-width: 800px;
width: 88%;

Debería mantener un ancho mínimo y ajustarse al 88%.

Otra forma de hacerlo es a través de media queries:

body {
  width: 100%;
  height: 500px;
}

div {
  width: 80%;
  height: 450px;
}

@media and screen (max-width: 800px) {
  div {
    width: 800px;
  }
}

Lo que dice es que, si la pantalla mide hasta 800px, entonces el ancho será de 800px, de otra forma tendrá un ancho variable de 80%.

No lo he probado y puede que me equivoque (perdona :P).

Gracias, la verdad que el primero me esta funcionando, aun con un par de problemas para configurarlo pero eso es ir jugando con los numeros. Te lo agradezco.