Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get CSS to stretch columns correctly

    Hey guys,
    I've been trying to code a layout from a PSD, and I'm rather new at CSS, and having some problems with some stuff that normally would be simple in HTML Tables.

    I understand you have to think about design differently with CSS, etc. etc., but I really don't see how to do this any way other than the technique I'm trying to achieve. Basically, I have the header and footer areas coded fine on top of and below the main area (that must stretch vertically). I used a layout I found somewhere online (can't recall where) to get a 3 column layout that stretches each column to the height of the highest column, but the problem is that I need to put DIVs inside of each column, to handle the side bars of the layout. I can get them to 100% height no problem at default height, but as soon as the columns get longer, the individual DIVs do not stretch vertically with their parent column.

    http://jfletch.info/portfolio/boredvideo/index2.html
    http://jfletch.info/portfolio/boredvideo/style.css

    Those are the URLs to the stylesheet and index page, which has the main area colored right now to show the distinct regions. As you can see, the red and blue stretch down, but the actual sidebars do not. Any solutions? Thanks in advance.

    EDIT: In Internet Explorer, you can see the sidebars, in Mozilla Firefox, you can't even see them.

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I'm reading your question correctly - then the simplest way to acheive this would be to apply a vertically tiled image to this <div class="pagewidth">

    Cut a horizontal tile from your psd, say 2 or 3 pixels high, then apply it as a background in your css.

    As far as CSS goes, yes it does require a different way of thinking - I don't think you're quite there yet - I don't think anyone is fully there yet. But it appears that you are kind of using lots of < div >s to replace lots of <td >s.

    The div tag isn't really meant to be used to manuipulate the minutae of visual design, rather it's there for *chunking* related parts of your document together.

    Really, your design could be acheived with a minimum of say - 6 divs, and absolutely no classes.

    A fantastic tutorial on the correct use of CSS is available here, well worth a look http://css.maxdesign.com.au/selectutorial/index.htm

    Kind regards,

    Gary

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So essentially, rather than a red white and blue background, I'd have a single background and I'd throw the content of the page on top of it? That sounds like a great idea, I'll try it out and see how that works. Thanks a bunch.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You got it

    This article explains it better than I could (at this time of night anyway)
    http://www.alistapart.com/articles/fauxcolumns/

    Good luck,

    Gary

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Also (I just started experimenting with this one), you can try "display: table-cell;" on the appropriate div.

    It emulates the expansion and contraction of a table cell while still allowing your markup to remain semantic.

  • #6
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://jfletch.info/portfolio/boredvideo/index.html

    I've been making progress, I cleaned up a lot of my code, have a background image and centered the header and footers without their ends, letting the background image make the appearance of their ends. Thanks a bunch guys, should be done soon.


  •  

    Posting Permissions

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