CSS

/**
 * Graceful degradation
 */
#sidebar, #main {
    float:left;
}
#sidebar {
    width:25%;
}
#main {
    width:50%;
}
@media (max-width: 800px) {
    #sidebar, #main {
        display:block;
        float:none;
        width:auto;
    }
}




/**
 * Progressive enhancement
 */
#sidebar, #main {
    display:block;
}
@media (min-width: 800px) {
    #sidebar, #main {
        float:left;
    }
    #sidebar {
        width:25%;
    }
    #main {
        width:50%;
    }
}