[SOLVED] CSS Issues

[sugarbleach]

Okay, its five in the morning and I've working on this for a long while. I have the div layers where I want them, but not how I want them. I have three problems I need help with:

1) How do I make the background images line up? They are all off by a couple of pixels and I can't seem to get it to work.

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does it go to the full height I specified (325 px).



Any help?


Here's a view of the problem: http://blog.sugar-machine.org

and here's the part of css concerning the divs (I added a border to each div so you can easily see where they are):

/* --------------- Div ID's --------------- */

#content {
width:741px;
background-image:url("http://blog.sugar-machine.org/wp-content/themes/default-empty/images/theme1middle.gif");
border:solid 1px #000
}

#footer {
background-image:url("http://blog.sugar-machine.org/wp-content/themes/default-empty/images/theme1bottom.gif");
border-top:1px solid #000;
width:741px;
height: 325;
padding:0px;
clear:both;
}

#header {
width:741px;
height:224px;
padding:0px;
background-image:url("http://blog.sugar-machine.org/wp-content/themes/default-empty/images/theme1top.gif");
}

#main {
background:transparent;
width:440px;
padding:0px;
border:solid 1px #000
}

#sidebar {
background:transparent;
width:240px;
padding:0px;
float:right;
border:solid 1px #000
}

#wrapper {
width:741px;
height:auto;
border:solid 1px #000;
margin:0 auto;
}

/* --------------- Classes --------------- */

hr.clear {
clear:both;
display:block;
visibility:hidden;
}

/*printer styles*/
@media print{

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

[sugarbleach]

EDIT: I fixed problems 1 and 3 but I still need help with problem 2. Why aren't my div layers moving AT ALL when I use the position: absolute value relative to another div layer????? Please help! Thanks!

And here's the part of css concerning the divs :

/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url();
border:solid 0px #000;
}


/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url();
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:0px;
position: relative;
}


/* ----- NAVIGATION ----- */

#sidebar {
width:180px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
float:right;
}


/* ----- MAIN CONTENT ----- */

#main {
width:460px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
margin-top:0px;
position: absolute;
top:0;
right:30;
}


/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url();
margin-top:0px;
border:solid 0px #000;
}

Resolved Stuff: (incase anyone has the same issue and wanted to know what I did)

1) The background images are not lined up. How do I make the background images line up? (The header and footer have a background image and so does the content box). They are all off by a couple of pixels and I can't seem to get it to work. [FIXED: Just changed the size of the images, apparently css wasn't the problem.]

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does not go to the full height I specified (325 px). [FIXED: Took another route and changed my css layering entirely.]

[FredT]

I'm not sure I can see exactly what it's supposed to look like when it is correct. Is "SugarDoll is proudly powered by WordPress Entries (RSS) and Comments (RSS)." supposed to go at the bottom? In the source code it is commented as a footer, which makes sense. What is supposed to go over the faded area?

If you could somehow post an image or diagram or something of how its supposed to look, that would help a lot.

[sugarbleach]

Thanks FredT! I already fixed it on my own. It took a while but it worked and was validated! Just mananged to get everything all nice and tidy just now.

This can be considered solved.

Here's the css I used for anyone who wanted to know:

/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url("");
border:solid 0px #000;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url("") repeat-y;
overflow:auto;
margin-top:0px;
position: relative;
}

/* ----- NAVIGATION ----- */

#sidebar {
width:182px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;
float: right;
position:relative;
right:92px;
top:0px;
}

/* ----- MAIN CONTENT ----- */

#main {
width:362px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;

margin-top:0px;
position:relative;
left:72px;
top:0px;
}

/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url("");
margin-top:0px;
border:solid 0px #000;
}