Divs stacking on top of each other problem

[noobstar]

Hi there everyone

 

I have this really weird problem i've never come across i have two divs and the bottom div doesn't seem to move as text is added to the top div.

 

Here is the code i got in the HTML file:

 

<table border="0" align="center">
<tr>
<td valign="top" align="center" width="200">

<div id="pnlCategory">
<br/><br/><br/><br/>
<a href="">Fiction</a><br/>
<a href="">Cooking</a><br/>
<a href="">Gardening</a><br/>
<a href="">Fiction</a><br/>
<a href="">Cooking</a><br/>
<a href="">Gardening</a><br/>
<a href="">Fiction</a><br/>
<a href="">Cooking</a><br/>
<a href="">Gardening</a><br/>
<a href="">Fiction</a><br/>
<a href="">Cooking</a><br/>
<a href="">Gardening</a><br/>
</div>

<div id="pnlNewsletter"></div>

</td>
</tr>
</table>

 

And here is the CSS i got:

 

div#pnlCategory {
background-image:url(images/categories.png);
background-repeat:no-repeat;
height:78px;
width:144px;
text-align:center;
}

div#pnlNewsletter {
background-image:url(images/newsletter.png);
background-repeat:no-repeat;
height:78px;
width:147px;
text-align:center;
}

 

Edit: Almost forgot I'm using Dreamweaver for this

 

 

Thank you very much for any help

[soycharliente]

Divs are independent elements whether you nest them or not. They don't react to each other and expand like table cells do.

 

What are you trying to accomplish with stacking the divs? What's wrong with an explicit width definition?

[Stooney]

Try

clear: both;