I can't seem to center the two columns correctly because the background image (the Bible image) on the 2nd column is what the "margin: 0 auto" is basing the width of the column on, but if I use margin-left on the left column to scoot both columns over to center IE 6 places the right column below the left one. Also, I need a way to make the columns be the same height and I don't know how since I already have background images in both the wraps for each column. Any ideas? Thanks!! Here is the link to the site: http://www.crosst.org/test/index.html CSS: http://www.crosst.org/test/ctstyles.css
You want the group of two, as a group, centered? Because usually the container which has both of those columns is what has the width and margin: 0 auto. You wouldn't want to stick it on either of the columns themselves. Unless you mean center the larger column, and have the sidebar tacked onto the right side? Equal columns would require the container holding the two columns to have a background image which fakes the appearance of the two being equal height. Likely a very tall image made of a beige strip which is positioned between the two columns, which has the rounded corners as a bottom (otherwise, you'll need two containers, one for a little beige strip (repeat-y) and another holding the bottoms...)
Sneaky trick - you can 'offset' your centering by padding the opposite side double the amount you want to slide it over. The bible image is 'poking off' the right side by what... 19px? Add padding-left:38px; to #content and it should pop it right over where you want. As to equal height columns, that's a tricky situation with a non-table layout. What you need to apply is called 'faux columns' where a tiling background runs the entire length of #content, then you 'erase' the parts you don't want with the header/footer - which means make sure those are opaque images instead of transparent for .roundedcornr_top and .roundedcornr_bottom
I appreciate your help, but I can't seem to get the faux columns to work since I have to have the rounded corners and the blue feather background in the left column. So, I tried setting each column div in a table column, but I can't remember how to keep the table columns open to be equal height. Sorry, that i can't grasp this easier. Can you help me understand? Thanks!