OK once again I have changed the layout and design of my site to make it more user friendly but I am having a problem with one layer it wont fit into the position its been set to I have two layers near the bottom of the page I put in two images to show where the layers are they should fit right beside each other but they wont
www.dragonstardesign.com can you please help
here is the css code.
#heading {
left:0px;
top:0px;
width:780px;
height:156px;
z-index:1;
float: left;
background-color: #FFFFFF;
background-image: url(new-style/top.jpg);
background-repeat: no-repeat;
overflow: hidden;
}
#sidebar {
left:0px;
width:125px;
z-index:2;
float: left;
background-color: #FFFFFF;
}
#header {
left:125px;
width:655px;
height:155px;
z-index:3;
float: right;
background-color: #FFFFFF;
background-image: url(new-style/header.jpg);
background-repeat: no-repeat;
overflow: hidden;
}
#content {
left:125px;
width:655px;
z-index:4;
float: right;
background-color: #FFFFFF;
background-image: url(new-style/content-bottom.jpg);
background-repeat: no-repeat;
background-position: bottom right;
min-height: 200px;
padding-bottom: 40px;
list-style-image: url(new-style/text.gif);
}
#entra-left {
width:325.5px;
z-index:5;
float: right;
min-height: 30px;
}
#extra-right {
width:325.5px;
z-index:6;
float: right;
min-height: 30px;
}
#footer {
left:125px;
top:238px;
width:655px;
z-index:7;
float: right;
background-color: #FFFFFF;
background-image: url(new-style/footer.jpg);
background-repeat: no-repeat;
background-position: bottom right;
padding-bottom: 25px;
padding-top: 5px;
margin-bottom: 5px;
}
#container {
margin:0 auto;
width:780px;
background-color: #FFFFFF;
background-image: url(new-style/content-back.jpg);
background-repeat: repeat-y;
}
body,td,th {
color: #000000;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica;
}
body {
background-color: #FFFFFF;
background-image: url(new-style/back.png);
background-repeat: repeat-x;
margin:0;
}
a:link {
color: #0066CC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0066CC;
}
a:hover {
text-decoration: underline;
color: #0099CC;
}
a:active {
text-decoration: none;
color: #0066CC;
}
h1 {
font-size: 24px;
color: #FFFFFF;
}
h2 {
font-size: 18px;
color: #000000;
}
h3 {
font-size: 18px;
color: #000000;
}
ul#list li {
line-height:16px;
list-style-image:url(new-style/folder.gif)
}
