divs + css adding phantom page height

[abudabit]

I'm using CSS and div's for my page layout. For some reason it adds a bunch of space at the bottom. The more div sections I have, the more space at the bottom. Here is a sample of one of the div sections:


<style>
.wrapc { width:275px; position:absolute; left:487; top: 100; }
.tbc1 { background:url('divt-side.png') no-repeat; height:57px; }
.tbc2 { background:url('div-side.png') repeat-y; height:386px;}
.tbc3 { background:url('divb-side.png') no-repeat; height:57px;}
.contentc { position:relative; left:13; top: -493; width:245px;}
</style>


<div class='wrapc'>
<div class='tbc1'>&nbsp;</div>
<div class='tbc2'>&nbsp;</div>
<div class='tbc3'>&nbsp;</div>

<div class='contentc'><center><iframe id="searchframe" name="searchframe" src="sresult.php" allowtransparency="true" background-color="transparent" marginwidth="0" marginheight="0" frameborder="0" width='98%' height="485"></iframe></center></div>
</div>



The layout for these looks great, it just adds that space at the bottom of the page for each of these sections. There are like 3 of these css based objects on my page.

[ray326]

It's probably the position:relative but your missing a boatload of units.

[abudabit]

That did the trick, thanks. Switching it to absolute fixed the problem and positioning a bit easier, too.