Ready to smash my keyboard

Hey guys and gals, its been awhile since I've been on the website however I'm sooooooo horribly frustrated(to the point I'm ready to crawl into a corner and have a break down, and yes I am losing sleep over this) and I don't know where to turn so hopefully somewhere here knows where I've messed up or what I'm doing wrong.

Well this is what it should for the most part end up looking like:


Now I'm all about my tables but I need to do this in CSS and keep it so that it fits any browser resolution....so far I'm almost there, this is where I am(excuse the images I plan on fixing them up later):
http://members.shaw.ca/pixelatedkarma/esp/
As you can see the stripe thats running down is not lining up with where my content is. My problem is I'm trying to make it display like a background image and when I set it to background-position: top left; It feels the neccessity to disappear behind the left column.

Here is what I'm thinking my css sheet should look like(sorry its so messy like I said I'm pretty new to the css thing):

body
{
margin:0;
padding:0;
line-height: 1.5em;
height: 100%;
background: #FFFFFF;
background-image:
url('images/background2.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:top right;
background-attachment:fixed;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
float: left;
height: 100%;
width: 100%;
}

#columnwrapper{
float: left;
height: 100%;
width: 100%;
}

#leftcolumn{
float: left;
width: 30%; /*Width of left column in percentage*/
margin-left: -100%;
background-image:
url('images/espsafety.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:bottom left;
background-attachment:fixed;
height:100%;

}

#contentcolumn{
float: left;
width: 70%; /*Width of right column in percentage*/
margin-left: -70%; /*Set margin to -(contentcolumnWidth)*/
height: 100%;
text-align: right;
background-image:
url('images/stripe.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top left;
}

#links{
position: absolute;
bottom: 0;
border-top: 1px #000000 solid;
clear: left;
width: 100%;
display: inline;
height: 10px;
background: #EFAB23;
color: #999999;
text-align: left;
padding: 0px;
font-size: 50%;
}

#sublinks{
position: absolute;
bottom: 0;
border-top: 1px #000000 solid;
clear: left;
width: 100%;
display: inline;
height: 40px;
background: #EFAB23;
color: #999999;
text-align: left;
padding: 0px;
font-size: 50%;
}

#footer{
position: absolute;
bottom: 0;
border-top: 1px #000000 solid;
clear: left;
width: 100%;
display: inline;
height: 14px;
background: #FFFFFF;
color: #999999;
text-align: right;
padding: 0px;
font-size: 50%;
}

#footer a{
color: #F3C747;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}



Thanks for all your help in advance I really appreciate it.

I am not sure what the problem is here. If you just want to make the background image not repeated, then the no-repeat attribute is ok.

On the other hand if you want to cut this template with valid xhtml and no work you can use a service like PSDgator ;)

The problem is if you look at the layout design, then look at where I am now, you'll see the stripe doesn't line up

Sorry I should specify it alittle better its not the stripes at the bottom that are the issue(although I noticed in IE explorer there is a small gap at the bottom which I can't seem to fix) but the major issue is the giant curve thats gray and white won't line up with the white backgrounded div.

try adding vertical-align:top;
after your position absolute to the area's concerned

I don't understand either what the issue is ??

I can see where you are trying to go and I see where the site
is right now but I don't know (and frankly don't have the time)
to understand logically how you want to split the images
and then GLUE them with html/css ?


You are telling us about a stripe but which stripe ?
what color ?

You have to really help us understand before we can actually help you

how many images ?
how many divs ?
what is their stack order ? (z-index ??)
what is their position ?

Alright Im a horrible explainer but hopefully this works, thanks guys ahead of time for bearing with me.



Okay so the copy on the left is the templated version, the copy on the right is where I am at right now with making this site layout in css. Area 1 is basically gonna be whatever content(not important). Area 2 is just for looks. Now the problem is there is a curved stripe(grey-found in area 2 on either of the images-kind of looks like half a triangle in the "coded version"), that stripe needs to fit tight against area 1, therefore making it look all one piece, and making it look all fluid.


Now the curved stripe itself needs to be set as a background image as it is bigger then what you see there because as you flip through resolutions the image itself won't change(due to the fact I'd like it aligned top left corner of area 2), but only certain portions of it will show up still giving it the fluid ability to be just as good looking in 800x600 as any larger resolution if that makes sense.

Thanks guys I'm sorry for being a hassle.

I think you should do this with an absolute div. eg.

<div style="position:absolute;bottom:0px;right:0px;">
<img src=".....

The best solution to this is for you to learn absolute positioning and z-index. The Triangle cut-off part is caused by the background on area 1 overlapping the image of the gray curve... If you set it's z-index higher and absolute position it, it won't break the overlap thus giving you a curved effect to the orange background image...

Did not understand your question too to see where?

nice templete work