SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member lisaanne's Avatar
    Join Date
    Jul 2007
    Location
    Bristol, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need help! 3 columns - same height - gap between each..

    Hiya,

    I hope someone has an amazing idea/some advice to help me on this!

    http://projects.18aproductions.co.uk/3cols/template.php

    I've trying to build a page that's got 3 columns.
    However, each of the columns needs to be separate from the others, with a border around it. And crucially for something later on in the design, all 3 columns need to be the same height.

    The design also has to be dynamic/stretch with the page (width wise). I'm happy for the 3 columns to be a fixed width if needs be (the middle one has to be cos of the image - 500px), but the gaps between each column need to be able to expand.

    Any advice gratefully received! I know I could do it with tables, but I really don't want to use them as it's not tabular data.

    Thanks!
    Lisax

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I have a some column equal height examples here:

    http://www.pmob.co.uk/temp/3col-abso...umns-fluid.htm
    http://www.pmob.co.uk/search-this/absolute-columns3.htm

    The fluid width version will likely suffer from pixel rounding errors in IE.

    You could use the PIE layout but it also has a large number of bugs and is much more complicated than mine.

  3. #3
    SitePoint Member lisaanne's Avatar
    Join Date
    Jul 2007
    Location
    Bristol, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul! You haven't got any gems for how to keep the outside 2 columns a fixed width have you?!
    So it'd be like 210px - variable - 150px (or something).
    So the middle column stretches, but the outside 2 stay the same?

    Lisa x

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Lisa, the first thing I'd ask is what are going to be in the side columns (and where will the menu be)? I'm asking because I don't throw DIVs around everywhere and then put the HTML I want to use inside it, I just put it where I want it to go (like with menus).

    Also, will the side columns be the same background color or will they have to change?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lisa
    ou haven't got any gems for how to keep the outside 2 columns a fixed width have you?!
    That does complicate matters a bit and means I'd have to use a mixture of 2 methods to achieve it.

    http://www.pmob.co.uk/temp/3col-abso...luid-fixed.htm

    The above uses my original 3 col layout (see sticky thread at top of forum) with the absolute column routine thrown in for good measure.

    The above layout is untested as I have just converted the two layouts into one but seems to be working in modern browsers ok. Test thoroughly.


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
  •