Faux columns — A List Apart does not speak to my site code. Please help!

Hi

It sounds like you are not getting the gist of what the faux columns are supposed to do.

You must have a Div wrapped around the full width of the content area, including the content column and the sidebar column. The faux image you create must be the full width of the combined area. If the site is 960 px, 250 for sidebar and 710 for contents, the faux image is 960 px wide. If the sidebar is on the right, the first 710 pixels are the color of the content column’s background and the last 250 are the color of the sidebar column’s background.

You apply the image as background to the content wrap, not to the sidebar or the content column.

Since your theme has no content wrap you say, you must add an additional div. I suggest making it the last line in header.php and close it as the first line in footer.php.

Does that help?

Thanks, I do get the concept, but I was laying out what I did first, until I realized that I don’t have a div that wraps everything together. I could easily go and make the 1px high, 860px wide gif to encompass the entire three-column format.

After that, I appreciate your suggestion. I’d like to try it. But I need more information, and excuse my learning process here:

So, I can open a div in one .php and close it in another? I didn’t know you could do that. I thought each php had to have its own closed loop.

Could you help me by writing out the line of code I would use in each?

hi

If https://ibeamforlife.com/blog is your site, you already have the div in place – it’s called <div id="wrapper">

If you look in header.php you will find the body tag that starts the content area of any web page. That tag closes at the very bottom of footer.php since all the content has to be within the body tag.

Similarly you can do the same with a div that will contain the entire area of portions of a site.

You could put a wrap div in index.php, page.php, single.php, archive.php, and any custom page templates you use. I just put them at the bottom of header.php and the top of footer.php so all of those other tenplates are contained within them. Then I only need to enter them once instead of separately on each of those pages. It can be done in each of the pages, that is fine. just a little more work.

As I said if https://ibeamforlife.com/blog is your site you already have a wrapper tag. <div id="wrapper"> Just assign the background image to that ID.

Hi there… Thanks for sticking with me.

One more question before I execute: I did see that this theme does define a wrapper in the Stylesheet, and so after reading the A List Apart article, I did go in search of the wrapper div in the stylesheet to add the code for the background image.

Only problem is, I checked all the php, and not one of them had a line of code that included the wrapper tag. It only appears in the CSS.

Again, my ignorance: If the wrapper tag is in the Stylesheet but not in a php, will the background code I insert in the CSS still be applied to the site? I thought I would have to somewhere in a php write <div id="wrapper"> for the background image information in the CSS to actually be applied?

If I do need to write that wrapper div line of text in a php, where would that go? That was my other problem with my experience: I didn’t know which php to include div id="wrapper" when the theme developer never used it.

Ack, hope that explains it. Can you provide more help? I really appreciate it…

As stvwlf said,

If https://ibeamforlife.com/blog is your site, you already have the div in place – it’s called <div id=”wrapper”>…

If you open a page on your site and view source you should see div id="wrapper", so you won’t need to add it

Oh wait, SORRY, I just re-read your posting… And I think by rereading it again two more times you are saying put <div id="wrapper"> in the bottom of header.php to have the wrapper tag apply to all the php that come “after.”

So do I just put </div> at the top of the footer.php to close the wrapper tag?

THANKS!!

You do not need to add <div id="wrapper"> to any of your files because regardless of where it is coming from it IS in your theme.

Please just make a background image that fits your full content area in width and apply it in your stylesheet to #wrapper.

Whether you can find it or not, since it exists, if you do the CSS correctly as suggested the image will display as you want it to.

Hello there again…

So, I did go View Source, and I do indeed have a wrapper tag in there. I don’t know how, because I don’t see it in any php… That’s not to argue, just that I don’t get it.

And I think it has to do with the problem that happened next (maybe?).

I went ahead and made the 1 px high file, and put the background in wrapper in the CSS, but notice, now, how the repeat goes past my footer.

Do you know how to get it to stop before the footer, so my column colors don’t “stick out” beyond the footer?

Once again: Thank you!!

Hi

I downloaded the theme you seem to be using, new balance of blue.
FYI, the line <div id="wrapper"> is the last line in the header.php template. file.

The issue you are describing happens when the footer is contained within the wrapper div. Normally what you’d need to do is close the wrapper div before the footer-wrap div starts in footer.php

However according to what I am seeing on your homepage, your theme is missing one closing </div> tag, on your home page at least.

I suggest for starters you insert a </div> before <div id="footer-wrapper"> which is in footer.php

This is difficult to explain to people who don’t work with HTML. I don’t think I can explain it any more clearly than that. Please make a copy of your footer.php file before you change anything so you can go back to the version you have now if your attempt to fix this makes a bigger problem. I think you have to us trial and error and move the closing div tags around in the footer file. Plus adding in one that is missing.

Firefox is very forgiving of improperly matched HTML. Internet Explorer much less so. You are actually better off looking at the page in Internet Explorer while trying to fix it because it won’t mask errors as much as Firefox does, and you want to get this right.

Close the wrapper div before the footer starts to accomplish what you asked me about. After you get that in place you may find the footer div now needs additional tweaks also.

Thank you very much. The funny thing is, I had read online the same thing, went hunting around, saw the wrapper tag as the last line of Header, put in the close div, but then got into some other problem solving because my permissions were changed…

Anyway, I’ve put in the close div before footer, and all is well now.

Thank you for being a second set of eyes, and for the tip on error-checking.