I have 2 div on a page. When the screen resolution is made sufficiently low, they overlap. I want to prevent this from happening. How do I make the bottom div move down when it comes in contact with the top div?
@WebJoelMay 24.2007 — #Posting your code is a good start, but assuming I understand the problem, I suspect that one or both DIVs are "position:absolute;". "absolute" should be used only when obejcts are expected to 'move around the screen' (much as you describe), or, when made to overlap like a handful of poker cards...
Here is what I think you are trying to do:
[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</div>[/B]
</body>
</html>[/QUOTE] Note the 'wrapper DIV', -a DIV that contains the two smaller content-containing DIV. All have "auto" for the height, so adding content to either text-DIV will expand the whole, keeping the paddings and margins intact.
The wrapper is 'centered' with [B]margin:10px auto[/B] (10-px top, and auto-center the rest), and you need to keep the valid !doctype at the top for this to work.?