SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 3 Col Header + Footer help....

    Hi all - this is my first post as I'm a complete new comer to CSS, I'm learning fast (out of neccessity) and wondered if anyone could help me with the following;

    If you go to http://www.gosub.co.uk/test/home.html you'll see a site that I'm currently working on - it all seems to work and sit together nicely except I want the left hand nav column to extend down to meet the footer - depending on the content of the centre column. As you can see I have a background image which is positioned on the bottom of the nav container - that works well if the height is set for each column - what I need is a layout that will expand with the content, which this does apart from the left hand column. The overall layout itself sits centrally within the browser window, looks ok in Safari on my Mac and in IE7 on my pc.

    Any help would be appreciated.

    Thanks

    Jay

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Jay, and welcome to Sitepoint

    You can fake full length columns by using a repeating background, the technique is called faux columns: http://www.alistapart.com/articles/fauxcolumns/

    And you can combine all your background properties into one rule using the shorthand notation:
    Code:
    #wrapper {
    	width:980px;
    	margin:0 auto;
    	background:#FFF url(sidebar_bg.gif) repeat-y 0 0;
    }
    So if you create an image named sidebar_bg.gif which can be 190px x 10px it will tile down the left side of your layout and make it appear as if the left column reaches the footer.

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thanks for the tip - it worked perfectly - now I just need to find a way of getting the graphic to sit on top of the footer ;-)

    Thanks again.


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
  •