cambio de layout con jquery

[nh2006]

Hola amigos,

Estoy tratando de solventar el clásico problema de las resoluciones de una web en diferentes máquinas, pensaba hacerlo con jquery algo así:

Código Javascript:

if ($('body').width() > 900) {
    $('link[href=default.css]').remove();
    $('<link rel="stylesheet" href="wide.css" type="text/css" />').appendTo('head');
} else {
    $('link[href=wide.css]').remove();
    $('<link rel="stylesheet" href="default.css" type="text/css" />').appendTo('head');
}
 

Per no va, la cuestion es que cuando tenga menos de 900px de ancho voy a tener unas medidas de posicionamiento en el defaul.css y cuando tenga mas tendré otras en el wide.css.

Alguna idea de cómo puedo solucionar esto?

Saludos cordialmente

[nh2006]

Bueno amigos, la solución la encontré en este post: http://plantillitasweb.blogspot.com/2009/10/detectar-la-resolucion-de-la-pantalla-y.html

Ahora eso trabaja al cargar la página, ahora les pongo lo siguiente:


Estoy en una compu con una resolución mayor a la de 1024 x 768 y carga todo bien, pero si le cambio el tamaño todos los divs comienzan a montarse unos sobre otros.

¿cómo hacen para que cuando se redusca de tamaño la ventana se cargue el otro archivo css elaborado para resoluciones menores?

desde ya muchas gracias