2 column faux prob :-(

HTML & CSS
1

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

On this page -
http://www.pauserefreshment.co.uk/twocolumn_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 :slight_smile:

2

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

3

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 :frowning:

But apologies for exposes members to this :frowning:

4

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.
[URL=ā€œhttp://www.pmob.co.uk/pob/equal-columns.htmā€]
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 ).

5

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?

6

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.

7

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:confused:

8

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

9

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.