CSS grid/layout framework with focus on fixed elements and single page full screen layouts

Question

Rule of thumb - if you\'re messing with CSS too much in your layouts, switch to a framework. I\'ve been going over the dozens of grid/layout frameworks out there and most of the

Answer 1

For the record, I think Ian gave by far the most complete and accurate answer here for a pure CSS answer and that would work perfectly. However, you also wanted to know what alternatives you had, and I have to at least provide another option so you know it's available:

I challenge your premise that Javascript doesn't do what you want it to do. JQuery is in my view a truly revolutionary library for Javascript and simplifies it immensely. According to Wikipedia, Jquery is "used by over 65% of the 10,000 most visited websites". From personal experience, trying to use pure CSS on my website fell flat for me. Using JQuery gave me much more flexibility and control over my CSS, no longer forcing me to use relative values. I'm a control freak so that worked for me.

JQuery is very easy to learn and allows CSS to be supplemented with browser events using Javascript handlers and events. For example, if you want to change CSS on refresh:

$(document).ready(function() {
    $(window).resize(function() {
         var windowWidth = $(window).width();
         $('#div').css('width',windowWidth-100); //the # references id, like in CSS
    });
});

See a more detailed example in action on my JSFiddle

If JQuery sounds like the right path for you to make your CSS dynamic and flexible for any occasion, there are several tutorials out there. It doesn't take long if you know CSS and Javascript and it works like a charm. Even if you don't know Javascript, you can do quite a bit with JQuery. Certainly what you're looking for with just a bit of a learning curve.