make a lateral div hide when the window is too small

I have something like this:
<div id="wrap">
<div id="content"></div>
</div>

The #wrap is wider and has a background image that places some nice borders around the #content.

Problem is, when the user has a low screen resolution, i want the #content to stick to the left side, not the #wrap.

Any ideas on this one?

 

you can use css @media queries..

/* default position for low resolution screens this will be applied when the screen resolution is less than the min-width set below */
 #wrap { float:left; }

/* place here the minimum width that you require to achieve the layout you want */
@media screen and (min-width:1000px) {
 #wrap { float:none; }
}

Code (markup):

 

Thanks, that worked great.