I was trying to fix the problem of the faux columns extending beyond my footer, and I read a forum and I though putting a </div> at the top of my footer.php would fix it.

It didn’t, but then when I deleted the div line of code, and updated, the header image and my navbar images disappeared, are no longer showing on the blog. Can you help?

www.ibeamforlife.com/blog

Here are some things I did, and excerpts of my code:

The CSS is here:
https://ibeamforlife.com/blog/wp-content/themes/new-balance-of-blue/style.css

I tried putting background: url(filename.gif) repeat-y in place of background: #FFFFcc; height: 1850px; in the CSS here:

div.one-column { width: 210px; background: #FFFFcc; height: 1850px; padding: 5px 5px 20px 12px; }

(yes, yes, I know, `height: 1850px1 is a VERY clunky, wrong workaround I’ve been doing, up until now)

But that didn’t work.

I tried putting in `background: url(images/filename.gif) repeat-y after content here:

#sidebar, #content { overflow: hidden; }

But that didn’t work. I tried it because my sidebar.php starts out

<div id="sidebar" class="float-right one-column">

So, you can see I’m missing something in my understanding of the php code. But I don’t see anywhere that the .php files have a wrapper that contains both the two-column mainbar and the single-column sidebar so that I could create a gif that would cover the entire 3-column format like https://www.alistapart.com/articles/fauxcolumns/ describes in his article.

And so the problem is, every other www.remarpro.com forum posting, where someone asks a question about Faux columns, the other members say “google faux columns,” and I have, and I even watched several YouTube videos, but they don’t address this very specific problem of no overall container to use a repeat gif across all three columns, and I can’t figure out with my code how to apply only the one-column repeat-y.

Can someone please take the time to look specifically at my question and help me work it out?

Thank you!

I’m having no luck getting Faux Columns working with my WordPress theme.

I managed to achieve equal height columns using javascript, but this broke when I specified a different sidebar on the page. Anyway, Faux Columns seems to be my only alternative, but so far I’ve not been able to get it working.

The url I’m testing this at is – https://www.magicalwonders.com/blog/

I’ve generated the theme using Artisteer and here’s what I’ve done. –
The sheet transparency for the theme was set to 100%. I then created a graphic 992 pixels wide. Mostly white, with greyish blue at the end for the sidebar. This has gone inside the images folder.

I’ve temporarily moved the page.php and single.php out of the theme to cut down the code involved. So I’m only dealing with the index.php and the style sheet. I’ve wrapped the container divs inside another div and given it a class called “faux”.

I’ve reference this in the CSS as follows –

.faux {background-image: url('images/backgroundtile.jpg'); 	    background-repeat: repeat-y;
}

I’ve also tried adjusting the CSS for the Content Layout Div –

.art-contentLayout
{ position: relative; 	margin-bottom: 2px; 	width: 992px; 	background-image: url('images/backgroundtile.jpg');
background-repeat: repeat-y;
}

Here’s the location of the theme if anyone has time to take a look – www.magicalwonders.com/FauxCol.zip

I’m not sure where I’m going wrong? If someone could point me in the right direction, I’d be very grateful.

Many thanks,

Myles

i’m trying to get both of my sidebars to extend down to the full length of the main content, and have search a bit and it appears that making “faux columns” is the best way?

if so, can anyone provide an easy explanation how to do this? i have a little CSS experience.. but not much!

here’s my site: https://chiknpastry.com

Have tried to faux columns adding blank text widgets etc.

Any other suggestions?

https://thebluejeansva.com

Thanks in advance!
Marta

page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.png") top repeat-y ;} 

<div id="header"> <-- top header image/ingo
<div id="page"> <-- used for "faux column" background as per above
  <div id="content> <-- content of posts/pages
  blah
  </div>
  <div id="sidebar"> <-- obligatory sidebar to the right of the content
  ul etc.
  </div>
  <div id="footer"> <-- no problems here clear: both lands on the bottom
  site name/powered by..
  </div>
</div> <-- end of "page" where background "works".

Here’s where I get messed up. If I end the “page” div after the footer all is well and the faux column extends to the end of the footer. While this is all fine and dandy, if I wanted that, but I have a transparent png at the footer that looks strange. If I end the “page” div before the footer and the contents of the “content” div is longer than the sidebar, I end up with the background image ending just after the sidebar. I know this is not how a faux column should work. What am I missing? I’m fairly new to designing with css as I usually muck around with backend than front end. I know I’m leaving out a lot of detail, but I’ll fill in any blanks. Thanks in advance.