SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same length coloumns.

    Hi. Could you please tell me what would be good code that I can use on my websites that ensures that all columns keep equal lengths athe bottom so that one column doesn't stay short while others are long because of items entered in these columns.
    Thanks. Paul

  2. #2
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This link could be a great help to your query http://matthewjamestaylor.com/blog/e...r-css-no-hacks

  3. #3
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You can also use some javascript code to get the maximum height of the columns, then to set the same height to the other column.
    An example and JS code is in this tutorial Make HTML elements the same height.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  4. #4
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you to all who repied.

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you to all who replied. I like James Taylor site and tutorials so well done Pestcontrol101. MarPlo thank you too as the site your recommended has some good tutorials as well. Much appreciated.

  6. #6
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My pleasure Paul. It's good to know that I've helped you somehow.

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

    I see you have already had some good suggestions and each method has its advantages and drawbacks.

    The negative margin approach is a a good method but add some complexity to the site not to mention extra elements. It can be awkward to tweak the design once completed because you have to adjust everything else to suit so maintenance can be awkward. However it does work well when implemented properly.

    If you have a fixed width site (or fixed width column) then the "faux column" approach is an easy solution then seldom needs extra markup as it often lends itself to the existing structure. The drawbacks are that you have to make an image each time you want a colour change.

    If IE8+ support only is required then you can use the display:table properties for your equal columns and in most cases will need no extra markup.

    A technique I often use for full length columns is to use an absolute overlay and was recently discussed in this thread.

  8. #8
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great to hear that...It's good that you have actually undertaken all such details.

  9. #9
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Would this work for a three column site? Like, first column for navigation, centre column for contents and right column for other info or adverts? Thanks for your help sofar. Appreciated. Paul

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

    You could use display:table for IE8+ and then feed ie7 some other rules with a runtime expression and then you won't need any extra markup.

    Here's an example:

    http://www.pmob.co.uk/temp/3col-fluid-round3.htm

    In a fluid layout IE7 and under may round dimensions awkwardly at times.

    Here are some other examples without using the expression.

    http://www.pmob.co.uk/temp/3col-abso...luid-fixed.htm
    http://www.pmob.co.uk/search-this/ab...umns3-hide.htm
    www.pmob.co.uk/temp/casino.htm
    http://www.pmob.co.uk/temp/equal-columns-3fluid.htm
    http://www.pmob.co.uk/temp/equal-col...id-centred.htm
    http://www.pmob.co.uk/temp/equal-col...te-dec2010.htm

    Of course the easiest approach would be to give equal columns to ie8+ (using display:table) and just let ie7 and under have content height columns.


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
  •