// afhankelijkheden:
// - yahoo.js
// - dom.js
//- event.js

fluidLayout = function() {
var maxW = 1280;
var minW = 800;
var fluidW = "98%";

var vp = YAHOO.util.Dom.getViewportWidth();
// afhankelijk van of de container een id of classname heeft pas je de onderstaande regel aan (id heeft voorkeur)
var col = document.getElementById("objectId"); //YAHOO.util.Dom.getElementsByClassName("col1")\[0\];

if(vp >= maxW) {
   YAHOO.util.Dom.setStyle(col,"width",maxW + "px");
   YAHOO.util.Dom.setStyle(col,"border","2px solid red"); // kun je later verwijderen
} else if(vp <= minW) {
   YAHOO.util.Dom.setStyle(col,"width",minW + "px");
   YAHOO.util.Dom.setStyle(col,"border","2px solid orange"); // kun je later verwijderen
} else {
   YAHOO.util.Dom.setStyle(col,"width",fluidW);
   YAHOO.util.Dom.setStyle(col,"border","2px solid green"); // kun je later verwijderen
}
}

YAHOO.util.Event.addListener(window,"load",fluidLayout);
YAHOO.util.Event.addListener(window,"resize",fluidLayout);

Javascript fluid layout

javascript

JavaScript