Faux Column Clarification

Jordan A. · Joined: 24 Sep 2008 Posts: 22

hey everyone,

I understand that with CSS if you want a border or column to extend all the way to the bottom, being fluid with however big the screen is, you should use Faux Columns? I read the article at his website and I just don't understand it. Is there an easier way to extend a left and right border all the way to the bottom a page--like on Ros's home page here?

If not, are any of you very familiar with Faux Columns and could clarify some things for me?

Thanks a bunch!
Jordan

Jim Hutchinson · Posted: Wed Sep 24, 2008 7:08 pm Post subject: **Re: Faux Column Clarification**

Hello Jordan

I have not heard of Faux Columns before now, but the technique is one I have used on other sites. What you do is create a DIV container, usually called "wrapper" that encapsulates the entire page.

Then you create your columns and put them inside the wrapper DIV. One or more of the columns will have a background image that is different from your main content area color. That gives the appearance of having wide borders or panels, in which you can put your navigation panel, advertisements, announcements, etc.

When you do that, all the columns will appear to be equal lengths. I found a good description of this technique at
http://www.addedbytes.com/css/faux-columns-for-liquid-layouts/

Jordan A. · Joined: 24 Sep 2008 Posts: 22

Jim,

Thanks for the quick reply. I understand that I need to add a DIV container. My site is 3 columns, all white background with Main Content on the Left--which btw is no where near ready for business. N e who...

I know I need to create a background image and load it up. My question is mainly about the image. The whole background is white, so couldn't I just make an image that is a 1px square, and vertically tile it located at a certain point? This way, I have a sidebar border on every page, which always extends to the bottom.

I made the sidebar borders look great by just tweakin the crap out of CSS, but if there's more content then the actual height of the border, the border won't go all the way to the bottom.

Maybe there's an easier way? An example would be the sidebar's for Rosalind's home page here.

Thanks
Jordan

Jim Hutchinson · Posted: Wed Sep 24, 2008 8:17 pm Post subject:

Using a 1px image and setting it to repeat will allow the width and length to be dynamic. For a fixed width background image, you can set the background-repeat: repeat-y for vertical only, along with: overlflow: hide so it does not extend past the DIV boundaries.

Jordan A. · Joined: 24 Sep 2008 Posts: 22

I understand the CSS side of things, but not the <div> side. Where exactly should I put the 'wrapper' so that it encapsulates the entire page? Then I can add 2 column divs under it right? Manipulating them then through CSS. Am I right? I saw the Faux Column thing and studied and researched. They are mainly talking about column background color. Everything on mine is white. Everywhere. Does that mean I should upload a white image? Or can just use a small 1px column and manipulate it's location?

A lot of jibble jabble, but I mainly need to know the correct spot to insert the new divs.

jordan

Jim Hutchinson

Once you get your styles.css set up, edit your web page.

Jordan A. · Joined: 24 Sep 2008 Posts: 22

It makes complete sense. I just need to know where to "edit my web page". I'm sorry to ask such a silly question. Do I go under a certain .php, or do I insert anywhere into HTML. All I have been working with are the .php's under my theme editor, and the css there. Is there another spot where I can access the HTML to put those div's in?

Thank you so much for your help
Jordan

Jim Hutchinson · Posted: Thu Sep 25, 2008 4:01 pm Post subject:

You can use the PHP editor. Just put the HTML outside of the <?php ?> tags. You would have to know the proper HTML tags though. Want to learn those? Try W3 Schools

You can also get a free HTML editor such as KompoZer.

OpenOffice.org includes an program called Writer that composes HTML too.

Just be careful with HTML editors. They usually do not play nice with PHP. You would have to edit the page, save it, then edit it in your PHP editor or plain text editor like Notepad or NoteTab (The editor I use to build websites)

Jordan A. · Joined: 24 Sep 2008 Posts: 22

Yea, I've been working with it all day with no luck. I think I'm there and then boom! No where close. But I will study w3 schools. I don't think I am finding the right template to do the HTML on. It's so frustrating because this is the last "tweak" I want to make before I start with the content building. I'm sure some other tweaks will introduce themselves in the near future though.

Thanks for the help
jordan