2 column faux prob :-(

**Zygoma** · Aug 27, 2010 09:26

In my quest to crack faux columns Ive hit another brick wall :-(

On this page -
http://www.pauserefreshment.co.uk/tw..._tutorial.html
I want the left column in yellow to run down to the bottom rather than cut short.

I put this css code in -
#leftcolumn {
float:left;
width:20%;
border: 3px solid black;
background:#00FF66 url(../images/faux_column_160.jpg) repeat-y 50% 0;
}

But why doesnt it run all the way to the bottom?

Heres a screen grab to illustrate the prob -

Any insights welcome :-)

**sdleihssirhc** · Aug 27, 2010 09:54

Maybe I'm missing something obvious, but isn't this the expected behavior? A block-level element (like a div) will only be as tall as the content it contains.

**Zygoma** · Aug 28, 2010 14:22

Originally Posted by sdleihssirhc

Maybe I'm missing something obvious, but isn't this the expected behavior? A block-level element (like a div) will only be as tall as the content it contains.

Thank you for your reply but I thought faux columns when done properly could stretch a column vertically overiding the distance in naturally wants to stop at

**daveg7** · Aug 28, 2010 14:44

When I try to see the site you mentioned, why do I get the following message in Firefox? Reported Attack Page!

What's up please?

**Stevie D** · Aug 29, 2010 02:28

That isn't how faux columns works...

What you do with faux columns is create a single background image that goes behind both columns (eg on the <body> element). Each of the two columns then has a transparent background, so that the image behind shows through. That way, the background image stretches all the way down to the end. You just need to make sure that the background image is lined up correctly so that the two columns are correctly aligned with the background colours. It's called faux columns, because the colour/image isn't actually attached to the column, it's just a visual trick.

**Paul O'B** · Aug 29, 2010 10:08

As Stevie D said above the faux column goes on a parent of the floated element (preferably not on the body though as that is always one pixel out on some browsers).

The parent holds the floats and therefore is always as tall as the tallest float and therefore an image repeated on the parent will always reach the bottom and make both columns appear to be equal. The actual columns don't change their height but that doesn't matter as they just lay on to p of the background.

More info here.

Your site is showing as an "atttack site" so you need to make sure all malware has been removed and then probably re-submit it to google (go to webmaster tools and
select request a review once you have cleaned the site ).

**Zygoma** · Aug 29, 2010 15:40

Originally Posted by Paul O'B

As Stevie D said above the faux column goes on a parent of the floated element (preferably not on the body though as that is always one pixel out on some browsers).

The parent holds the floats and therefore is always as tall as the tallest float and therefore an image repeated on the parent will always reach the bottom and make both columns appear to be equal. The actual columns don't change their height but that doesn't matter as they just lay on to p of the background.

More info here.

Your site is showing as an "atttack site" so you need to make sure all malware has been removed and then probably re-submit it to google (go to webmaster tools and
select request a review once you have cleaned the site ).

off topic: OK the attack site message is driving me nuts. I knocked out all virus lines and re submitted the site but still getting the damn message. When I left it on friday just gone I had no attack crap signs. Ive knocked out the iframes on all pages. I cant even check the source code from home to see if its re infected. I'll have to wait till tuesday before I can do anything about it :-(

But apologies for exposes members to this :-(

**Zygoma** · Aug 29, 2010 15:42

Originally Posted by Stevie D

That isn't how faux columns works...

What you do with faux columns is create a single background image that goes behind both columns (eg on the <body> element). Each of the two columns then has a transparent background, so that the image behind shows through. That way, the background image stretches all the way down to the end. You just need to make sure that the background image is lined up correctly so that the two columns are correctly aligned with the background colours. It's called faux columns, because the colour/image isn't actually attached to the column, it's just a visual trick.

Brilliant thanks Steve :-) I'll have another go this tues and post my progress (After Ive sorted the virus cra*p out )

**Zygoma** · Aug 31, 2010 07:15

Originally Posted by Paul O'B

As Stevie D said above the faux column goes on a parent of the floated element (preferably not on the body though as that is always one pixel out on some browsers).

The parent holds the floats and therefore is always as tall as the tallest float and therefore an image repeated on the parent will always reach the bottom and make both columns appear to be equal. The actual columns don't change their height but that doesn't matter as they just lay on to p of the background.

More info here.

Your site is showing as an "atttack site" so you need to make sure all malware has been removed and then probably re-submit it to google (go to webmaster tools and
select request a review once you have cleaned the site ).

Yes it worked thank you - I get it now :-) Its the parent of the columns I should be targetting not the actual columns individually :-)
Thank you everyone!

User Tag List

Thread: 2 column faux prob :-(

Thread Tools

Display

2 column faux prob :-(

Reported Attack Page!

Bookmarks

Bookmarks

Posting Permissions