PDA

Click to See Complete Forum and Search --> : How to push down div so that does not overlap

damon2003
05-24-2007, 08:08 AM
Hi,

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?

thanks a lot!
ToonMariner
05-24-2007, 08:24 AM
can we have a link or some code please?
WebJoel
05-24-2007, 08:29 AM
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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div style="width:80%; height:auto; margin:10px auto; padding:10px 0 10px 0; border:1px solid black">

<div style="width:95%; height:auto; margin:0 auto 10px auto; padding:10px; border:1px solid blue;">
<h1>top DIV</h1>
<h2>Will expand automatically...</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
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 style="bottom:0; width:95%; height:auto; border:1px solid red; padding:10px; margin:10px auto 0 auto; ">
<h1>bottom DIV</h1>
<h2>Will expand automatically also...</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
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>

</body>
</html>
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 margin:10px auto (10-px top, and auto-center the rest), and you need to keep the valid !doctype at the top for this to work.:)