media only divs

[Unicris]

Hey, I am attempting to place ads on my site. I have a fluid grid layout using dreamweaver in which I have a Left navigation then right content layout. It works well in readjusting my content to view on mobile devices or computer browsers.Anyway, I would like to place ads which would be ok when it has the right and left layout in larger windows. But when switching to mobile, the navigation moves to the top of the content. So since I am including the ads Div inside the Navigation Div so it scales appropriately, I would like to not have the ads shown on the mobile version of the site, or to display a different size ad that would not be as intrusive. I saw somewhere that adding to my CSS would apply to any browser less than 481 px. I am testing on a galaxy s3.

@media only screen and (max-width: 481px) { #ads1 a {        display: none; }}

, but the ad still shows up. In this case its not a huge deal, but if I include a skyscrapper ad, I don't want that showing up in front of all my content.Here is the HTML for the particular DIV arrangement

<div id="CareerNav">    <?php include ('../../navigation/careerNav.php'); ?><div id="ads1"><br><hr><br> <a href="http://click.linksynergy.com/fs-bin/click?id=2mtHBT8Zwf4&offerid=145240.10000074&subid=0&type=4"><IMG border="0"   alt="234X60" src="http://ad.linksynergy.com/fs-bin/show?id=2mtHBT8Zwf4&bids=145240.10000074&subid=0&type=4&gridnum=3"></a>    </div>  </div>

The site in question is at http://jonccody.com/career/skills/business.php I plan on adding different ad blocks to different pages depending on the size of the adjacent content. But I've gotta get it not to show in the browswers in which the navigation moves above the content. (IE Mobile phones) If I can figure out a way to display a different set of code for those situations, that would be good. I'd probably add a Div below the content for mobile browswers.