Responsive design question

hey guys I rebuilted my css for responsive design. It works
now Im stock with my right_container.
I want it to be in the right side but if the screen resolution is smaller it should be under the main content in full width


I want to accomplish this without @media
http://giantgag.com/funny-animals/before-coffee-vs-after-coffee?pid=2396

 

Not using CSS media queries only leaves you with JavaScript as an option.

With jQuery:

jQuery(function() {
    var resizeWindow = function() {
        if(jQuery(document).width() < 1171) {
            jQuery('.right_module').css({'width' : '100%'})
        }else{
            jQuery('.right_module').css({'width' : '350px'})
        }
    }
    // call the function on page load
    resizeWindow();
    // call function on page resizing
    jQuery(window).resize(function() {
        resizeWindow();
    });
});

Code (markup):

Tested on your website with Google Chrome.

 

thank you
what about @media

 

My question would be how the blue blazes are you making a responsive layout without media queries -- I THOUGHT that was the entire MEANING of it!!!

... and NO, throwing ignorant halfwit jQuery ****tard bull at LAYOUT is NOT the answer -- well, unless you're dialing back the clock six years to go mcSwitchy... though 99.99% of the time anyone says 'use jQuery' the proper response is "Good lord WHY?!?"

Really though, why NOT @media?!? I mean, you say responsive, that's how you do it.... PERIOD, full stop, end of story.

 

With media queries it's pretty straight forward. Just add this code to your stylesheet. I haven't tested this (didn't have time) but should work fine.

.right_module{
    width:350px;
}
/* when the view port is anything up to 1171px make the right module fit the container */
@media (max-width: 1171px) {
    .right_module{
        width:100%;
   }
}

Code (markup):