CSS: Position: droit absolu sans défilement horizontal

Question

J'ai une démonstration de cette disposition ici: http://jsfiddle.net/LwRva/

Ce que je suis en train de réaliser est une disposition qui est 680px de large pour la plupart des utilisateurs, mais seulement 480px - sans une barre de défilement horizontale pour ceux qui utilisent une plus petite résolution. (Imaginez 680px est en fait 1180px et 480px est 980px - juste pour l'utiliser dans JSFiddle.)

C'est essentiellement une disposition div à 3 colonnes, où les colonnes de gauche et de droite sont cachées si la page ne peut pas les contenir .

J'ai déjà la colonne de gauche qui fonctionne exactement comme je le veux, elle ne modifie pas la barre de défilement horizontale si elle ne rentre pas sur la page. Mon problème est avec la bonne colonne. En raison du fait qu'une marge négative-droite ne fonctionne pas de la même manière.

Des idées?

Answer 1

@RoToRa est correct pour le support. Un possible pour votre css mise en page pourrait être la suivante:

@media screen and (max-width: 580px) {.featured-box-left {display:none} } 
@media screen and (max-width: 480px) { 
.featured-box-left,.featured-box-right{display:none;} 
} 

Lorsque la largeur de l'écran est 580px puis cacher .featured-box-left. Si l'écran est 480px ou moins, masquer à gauche et à droite.

Démo:http://jsfiddle.net/LwRva/6/

En général ce que vous essayez d'atteindre est d'appeler Tou Responsive Web Design. A List Apart a un excellent article, vous pouvez trouver des informations: http://www.alistapart.com/articles/responsive-web-design/