[shroder]

I'm currently trying to stop using tables for my layouts. (Hard addiction to drop).

I am currently having trouble with netscape and a design I'm trying to achieve with <div>'s. I don't know if I'm doing it right. The part I'm trying to fix is where the main content will go in. It's basicaly a box with a top (header) and a side to the left. The side looks fine in IE but it suddenly stops and there a big gap between teh bottom of the side and the bottom of the box. It can be seen here:

http://shroder.dyndns.info/~splzcrazy/splcrazy.htm

Here's the code for the box:

<div style='margin-top: 4px'>
<div style='background: #cccccc; width: 615px; border: 1px black solid; height: auto;'>
<img src='images/main_03.gif' width="615" height="23">
<div style='width: 10px; background: url(images/main_05.gif); background-repeat: repeat-y;'>
<div style='height: auto; margin-left: 5px; width: 610px; border: 1px solid black; border-bottom: none; border-right: none;'>
<p>test</p>
<p> </p>
<p> </p>
<p>test</p>
</div></div></div></div>


I'm hoping someone can point out what I'm doing wrong. I also feel like I'm making too many div tags.

Any help would be appreciated. Thanks!