Ad blockers are the most popular plugins for browsers these days. They come with comprehensive blacklists that will block most ads on the Internet right from the get-go. As a web developer, you can't prevent people from using an ad blocker, and it's probably a horrible idea to block access to your content if they do use an ad blocker. One thing you should do is make sure your site doesn't break or look ugly.

Sites that aren't designed with ad blockers in mind may end up with oddly-placed elements and other overlapping content. This is because web developers design with the ads in mind and generally don't care what the site looks like with the ads blocked. It only takes a little diligence and JavaScript to detect when ads have been blocked, and adjust certain elements accordingly.

To detect if an ad has been blocked, you can use the JavaScript offsetHeight attribute. Enclose your ad (just the ad itself) in a div with a unique id. Then give a unique id to any other element you want to remove if the ad is blocked.

Here is an example:

<div id="adHeader">Billboard</div>
<div id="adBody">AD GOES HERE</div>
Now to determine if the ad has been blocked, check the offsetHeight of the adBody div. If it's sufficiently small you will know that the ad is missing, so set the display value of both the ad and other content to none:

<script type="text/javascript">
if (document.getElementById("adBody").offsetHeight < 10) {
document.getElementById("adHeader").style.display = 'none';
document.getElementById("adBody").style.display = 'none';
}
</script>
Be sure to put that JavaScript code somewhere after the ad container and any other elements you're removing/altering. Maybe put it in a window.onload function or after a delay.