Get browser width and move element depending on size?

How to detect the browser width and move elements depending on 开发者_Go百科size?

Similar to Mashable - http://mashable.com/2011/07/24/google-plus-jobs/

An old question, so answering on the off chance that someone else may stumble across it. I would recommend the usage of CSS media queries and looking into responsive web design where the design of the page is tailored to the device based on screen size.

More specifically, looking at the following CSS properties to load different CSS rules:

min-width:
max-width:
min-device-width:
max-device-width:

For example, you may target smart phones in the following manner:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

Above example taken from http://www.databasepublish.com/blog/rendering-content-adaptively-responsive-web-design-and-css3-media-queries which has a few nice rules.