Hi,
New to css pls help!

I have a Div box which holds two Divs inside one for menu, one for content side by side, i wanted to use a color for menu column, problem is menu column and text column doesn't align as per the content! so i have used background image for the Div id #cnt, background appears fine in ie but not in firefox, to make it appear i have to mention height!! pls help me with it! thanks,

this is what i used,
CSS

#cnt {
padding: 0px
margin: 0px;
position: relative;
width: 770px;
background-image: url(../images/cntBg.gif);
background-repeat: repeat-y;
}
#NavBar {
width: 220px;
height: 300px;
margin:0;
padding:0;
display: inline;
float: left;
}

#textBox {
display: inline;
margin:0px;
padding:0;
width: 550px;
height: 300px;
float: left;
}

HTML
<div id="cnt">
<div id="sidebar"></div>
<div id="main"></div>
</div>

My bad, to avoid confusion i try to use suitable words for id's, hence i change them in post, but only changed in html!! sorry!

Here it is again, and the prob is the background of #cnt isnt spreading in Firefox unless i mention some height.

MY CSS

#cnt {
padding: 0px
margin: 0px;
position: relative;
width: 770px;
background-image: url(../images/cntBg.gif);
background-repeat: repeat-y;
}

#sidebar {
width: 220px;
height: 300px;
margin:0;
padding:0;
display: inline;
float: left;
}

#main {
display: inline;
margin:0px;
padding:0;
width: 550px;
height: 300px;
float: left;
}

#ftr {
clear: both;
padding: 0px
margin: 0px;
position: relative;
width: 770px;
height: 50px;
background-image: url(../images/ftrbg.jpg);
background-repeat: no-repeat;
}

My HTML


<div id="cnt">
<div id="sidebar"></div>
<div id="main"> </div>
</div>
<div id="ftr"></div>


Thanks.