PDA

View Full Version : my div isn't stretching

evalopez
10-16-2009, 01:44 PM
Hi there,

Hope someone can help! I am trying to get the column on the right of this to auto-stretch to the height of the left column, but it isn't working. What am I doing wrong?

<body style="background:url(images/bg.gif);">

<div align="center">
<div style="width:920px; height:auto;">
<div style="background:url(images/shadow-t.png); height:8px; width:920px;"></div>

<div style="background:url(images/content-bg.png) repeat-y; width:920px; float:left;">
<div style="width:900px; height:auto;">

<div style="width:900px; height:34px; padding-top:12px; background:url(images/nav-bg.jpg); float:left;" align="left">
Navigation</div>

<div style="background:url(images/logo-bg.jpg); width:900px; height:180px; float:left;" align="left">
<div style="background:url(images/logo.jpg); width:435px; height:123px; margin:21px 0 0 22px; float:left;"></div>
<div style="width:118px; height:180px; float:left;"></div>
<div style="background:url(images/head-right.jpg); width:325px; height:180px; float:left;" align="right"></div>
</div>

<div style="width:900px; float:left; background:#fff;" align="left">
<div style="width:566px; float:left; margin:30px;">
<h1>Title</h1>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
</div>
<div style="width:257px; float:left; background:#fff4c7;">
<div style="width:257px; padding:10px 0;">
<h1>Title</h1>
<p>Notice this doesn't stretch the whole way down.</p>
</div>
</div>
<div style="width:17px; height:auto; float:left;"></div>
</div>

<div style="background:url(images/footer-bg.png); width:900px; height:200px; padding-top:25px; float:left;"><p>footer</p></div>

</div>
</div>

</div>
</div>

</body>
amicus
07-09-2010, 02:34 AM
set the height of the outter div

then set the height of the 2 inner div to 100%


<div style="width:900px; height:500px; float:left; background:#fff;" align="left">
<div style="width:566px; height:100%; float:left; margin:30px;">
<h1>Title</h1>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
<p>Just type randomly here</p>
</div>
<div style="width:257px; height:100%; float:left; background:#fff4c7;">
<div style="width:257px; padding:10px 0;">
<h1>Title</h1>
<p>Notice this doesn't stretch the whole way down.</p>
</div>
</div>
<div style="width:17px; height:auto; float:left;"></div>
</div>