Hows it going. Im just started to learn a bit about joomla and Im trying to get my divs to align vertically when making a template. The problem is that the right div is way down the bottom of the page on the right hand side and the center div is aligned at least 1 character height below the left div which is the only one correctly aligned. I also cant see the footer div (maybe because the image is plain black along with the text.) The left, right, center and footer div are within a container div. I previewed it in firefox and although the container image and borders are exactly where i want them, the div contents are all over the place. Heres the css code, any help with this would be great. Ill also paste the Div ids and structure below the css awell. Thanks in advance.
body{
margin: 0 auto;
background-color: #000000;
background-repeat: repeat;
text-align: center;}
#container {
width: 900px;
height: 759px;
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
background-repeat: no-repeat;
background-image: url(../slices/images/images/content-slice.jpg);}
#searchbox{
}
#header{
width: 900px;
height: 104px;
background-repeat: no-repeat;
background-image: url(../slices/Sf-Head-slice.jpg);
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
text-align: left;}
#header2{
width: 900px;
height: 108px;
background-repeat: no-repeat;
background-image: url(../slices/searchboxwithplayer-slice.jpg);
margin: 0 auto;
border-left:5px #ffffff solid;
border-right:5px #ffffff solid;
text-align: left;}
#footer{
width: 900px;
text-align: left;
margin: 0 auto;
height: 28px;
background-repeat: no-repeat;
background-image: url(../slices/images/footerslice.jpg);}
#left{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: left;}
#right{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: right;}
#center{
text-align: left;
margin: 0 auto;
height: 752px;
width: 400px;
}
Heres the divs
<body>
<div id="header">this is the header</div>
<div id="header2">this is header2
<div id="searchbox">this is the searchbox
</div>
</div>
<div id="container">this is the container
<div id="left">this is the left column</div>
<div id="center">this is the center column</div>
<div id="right">this is the right column</div>
<div id="footer">this is the footer</div>
</div>
</div>
</body>