Divs overlapping on small screen - css

Question

As I'm not good at explaining, I drew a few pictures.
I currently have the following code
<header style="height: 280px;">
<div id="topmenu" style="height: 70px; width: auto; margin-top: 217px;">
<ul><li>home</li><li>page</li><li>contact</li><li>more</li><li>more</li></ul>
advert
</div>
</header>
<div id="leftnav" style="float: left; width:200px;">
<center>menu here</center>
</div>
<div id="rightnav" style="float: right; width:200px;">
menu here
</div>
<div id="content" style="margin-left: 276px; margin-right: 260px;">
content
</div>
Which looks like this:
But on a mobile device or smaller screen, or when I add more menu items, the advert is pushed out because it doesn't have enough space and overlaps the content div, it looks like this:
But what I want it to do, is push the content div down, so it doesn't overlap, like so:
How can I modify my html / css to correctly display the advert on smaller screens?
min-width is not an option.

Answer 1

If suppose you are using different agents, like mobile or tablet, then you have something different. you would observe that most of the website like, orkut, facebook, gmail ect... has a mobile version website and a touch version website. These websites are made to suit the user screen. Similarly, you have to code a website to suit the user agent.
Read this link and this link. Now yoy have to make a separate page for mobile and other such agents. And redirect the user to the mobile version website.
For different computer screen size, you can use your width and height in form % or em. That would work. The screen size is dynamic and % or em provides with mapping your objects on basis of dynamic screen size.
Try it, may that work.
Instead of
#main:
{
width:270px;
height:300px;
}
use this:
#main:
{
width:40%;
height:60%
}
You will find a better explanation here.
Read about cross browser compatibility. This is also a good link for cross browser compatibility.