SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column faux prob :-(



    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 :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Enthusiast daveg7's Avatar
    Join Date
    Oct 2008
    Location
    Berkeley, California, U.S.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Reported Attack Page!

    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?
    Last edited by daveg7; Aug 28, 2010 at 14:45. Reason: Forgot to fill in Summary
    On Twitter: Daveg777

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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 ).

  7. #7
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 :-(
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  8. #8
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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 )
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  9. #9
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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!
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •