Left and Right sides boxes are centering... help

[foilman]

I have no idea what I did but I am getting ready to go live with my site this weekend, or so I hope! It seems my left and right side boxes are centering vertically on my pages. I want it to stop! I have spent the last 3 hours searching the forum and searching the faq's and I can not seem to find it. Can someone plese help me?? My site is www.foilman.com/store

Please help me save my Sunday deadline and still get this site up! :)

Thanks,
Rich F
Foilman.com

[gjh42]

I've never really used tables, so it took a guess after searching the relevant parts of view source, but here it is: you are missing

valign="top"

in navColumnOne and navColumnTwo. This is an HTML table tag that needs to be in <td> here:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>

 <td id="navColumnOne" class="columnLeft" style="width: 150px"> 

just like it is here

    <td valign="top">
<!-- bof  breadcrumb -->
    <div id="navBreadCrumb">Home
</div> 

Apparently table contents default to centered vertically instead of top/left like divs.

[Sketchy]

Whoah.. code offender!!

In your current template's "stylesheet.css":

//*#navColumnOne {
        background-color: #CC0000;

        }

#navColumnTwo {
        background-color: #CC0000;
        }   *//

Your customized Comment-Out tags are naughty. Remove the extra back slashes(in red).

/*please use this*/

[foilman]

Thank you, I think I got it... now to figure out (on the same site www.foilman.com/store) how to get it even with the top header logo. Any ideas anyone??

Thanks,
Rich

[gjh42]

You don't mean even with the top of the header/logo, do you? That would involve yanking big chunks of code out of tpl_header.php and putting the code in another file for the center column.
Or you might be able to do it with some advanced CSS absolute positioning techniques.

If you are just talking about the unevenness between the Categories, breadcrumb and Visit Our Sponsor headers, you can remove the border around the categories box, and fiddle with padding-bottom on one or more of #categoriesHeader, #navBreadCrumb or whatever the right box header div is named.

[foilman]

Glenn,
Well yeah that is was I had meant, well until you just scared me! I will settle with taking out the border for now and maybe play with it another time I guess. Sure would love to know what to do for the future if you do know how to do it?

Thanks,
Rich

[gjh42]

Do you realize that in a 1024x768 monitor, your logo won't fit between the sidebars? I'm not sure if that's the majority of existing computers, but if you do what you suggest, you will make it impossible for a vast number of people to see your site properly/comfortably.

Anyway, assuming you work around that problem, the basic situation is that tpl_header.php needs to run first to output message alerts above the top of the regular page, so it can't just be moved into the table structure as is. All of the header output code could be moved to another (center column) file, and display between the sidebars, while the header div would disappear from above the sidebars.

The gentler way to do it, without getting into detailed specs, is to make #headerWrapper absolutely positioned, with 100&#37; width, left padding = left sidebar and right padding = right sidebar. Absolutely positioned elements take up no space in the page layout, so the header area would shrink to nothing and the rest of the page would move up to the top. Give the center column a margin-top = header height, and it will drop down below where the header is sitting.

There may be other complications in getting it perfect, but I believe this plan will do the job.