SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    London
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS layout - kinda

    Hi,

    I have redone my website a number of times in CSS and have never ever made it live because of one major brain fart.

    Everytime I redo my tabled website because of a reinvigerated desire to produce pretty printer friendly versions I get stuck on the same thing (please refer to the attached image). Before wooing at my l33t photoshop skills, I would appreciate some of your wisdom.

    I am fine with CSS positioning, but the layout confuses me. I wish to retain the 3 column vertical stretch feel you get with tables, but with CSS.

    So then I think ok, well I'll have 3 seperate vertical divs. Each will stretch for the content. But the problem with this is that all 3 divs will stretch independently.

    So then I think ok, well I'll make one big div and have the 3 columns inside this div, but give the outside 2 a bgcolor so the centre column (which contains the content) should be the only one that stretches, and what with the coloured outer columns it won't look odd. But then the outside columns still don't stretch with the center column because they're not attached.

    And then I get stuck with the footer.

    My footer has to be in the format it is in the attached image.

    How on Earth can I put that footer there without knowing the absolute positions of the above div ?

    These questions aside, I have managed to get over some quite (for me at least) complex positioning and formatting issues, however this big brainfart is halting all my progress.

    I hope this makes sense to someone!

    Thank you for any help
    Attached Images Attached Images

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't seen your image because it's pending approval, but does this help?

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to imulate stretching right and left colums, you can set the background color on the body to the color you want for the left and right colums.

    Float the left and right colums respectfully, and position the center colum using margins set the same as the width of the left and right colums.

    Then simply place the footer below the center content in the markup, since the center content is the longest colum, it'll force the footer down, and you won't have to worry about clearing the floats, unless one or both of them becomes longer than the center content.

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (like in my example)

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    (like in my example)
    Yours takes care of everything, when the side colums grow larger, and if theirs little content it makes the page 100% of the viewport.

    Good example.

    I'm big on content, so I leave out the 100% height.


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
  •