What template to add additional divs outside of mainWrapper??

[gjh42]

Give #mainWrapper a width (770px, 85%, 97%...), but don't give mWLeft & mWRight widths. Give the second outer one (mWR) padding, or give mainWrapper margins equal to shadow width; both will work, and there are other possibilities for certain effects.

Do give mWL margin: auto; so it stays centered in the screen.

[barricades]

thanks Glenn, I've futtered about with the margins and the placement and such but it's still not hugging the mainWrapper, this is what i have:

#mainWrapperLeft {
background-image:url(../images/leftShadow.gif);
background-position: top left;
background-repeat: repeat-y;
margin: auto;
}

#mainWrapperRight {
background-image:url(../images/rightShadow.gif);
background-position: top right;
background-repeat: repeat-y;
}

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 770px;
margin-right: 5px;
margin-left: 5px;
}

As I say, I've tried messing about with the above but to no avail. Any idea what I'm doing wrong?

Also I've tried to find some decent tutorials online for Divs but haven't found anything more than really basic stuff - do you happen to know of any good tuts?

cheers!
Dave

[barricades]

Could anyone even just direct me to a website which has similar css to what I'm trying to get and I could look through FF to see what their css is like

[gjh42]

My site does shadows like this, except that I put the extra divs inside mainWrapper. Of course, the locations of parts of the CSS had to be switched. It shouldn't make a difference, but you might try it and see...

[touchclothing]

None of this worked can someone help figure out why.

Here is what I put in my stylesheet.css
#mainWrapperRight {
background-image:url(http://www.touchcrew.com/touchshop/i...s/dropsh.gif);
background-position: top right;
background-repeat: repeat-y;
}

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 850px;
vertical-align: top;
}


And this is what I put in my tpl

?>
<div id="mainWrapperRight">
<div id="mainWrapper">
<?php
/**
* prepares and displays header output
*
*/
require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

[gjh42]

Two points that may help:

There is no reason I know of to use a full http filepath for the background image. Using
background-image: url(../images/dropsh.gif);
will get the desired results, and allow your code to be portable to a test/development environment as well.

It may be necessary for proper function to do the divs in the same way I did them: #mainWrapper with #mainWrapperRight inside it.
Give #mainWrapper the desired width and margin: auto;
Give #mainWrapperRight width: 100%;

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 850px;
    margin: auto;
    vertical-align: top;
    }

#mainWrapperRight {
    width: 100%;
    background-image: url(../images/dropsh.gif);
    background-position: top right;
    background-repeat: repeat-y;
    padding-right:7px; /*or whatever the shadow width is*/
    }

?>
<div id="mainWrapper">
<div id="mainWrapperRight">
<?php
/**
* prepares and displays header output
*
*/
require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE , $current_page_base,'common'). '/tpl_header.php');?>

and don't forget to add an extra </div> at the end of the file to properly close the new div.

[touchclothing]

thank you for the posting a reply it worked but if you look at the site why is it inside and not on the out side and why does it not go from top to bottom? here is the site http://www.touchcrew.com/touchshop/

[gjh42]

You don't see it from top to bottom because you didn't add the
padding-right:7px; /*or whatever the shadow width is*/
to #mainWrapperRight as recommended; also, the logo is a fixed width, so you need to expand #mainWrapper by the width of the shadow.

To center the page in the screen, add margin: auto; to #mainWrapper as posted above.