CSS-Tricks PSD to HTML

New Screencast: Columns of Equal Height

There is a new Screencast up in the new videos section.

Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I’ll show you a little trick around it. Instead of making the actual elements themselves equal height, we’ll use a background image to “fake” the look of equal height columns.

screencast-5-thumb.jpg

You can see right at the top of the sidebar now there is a new feed just for videos. I’ll be posting notifications about new screencasts to this feed as well for for a little while until that new feed grows up and has a little life of it’s own. Does anyone feel that a) they like the notifications here as well or that b) they don’t like the notifications here, that’s what the other feed is for… let me know.


Theoretically Related Articles:


Responses


  1. 1

    Gravatar

    hmm a nice trick to remember :)


    Comment by Chocopunk — February 16, 2008 @ 12:22 pm

  2. 2

    Gravatar

    I personally would like to see the videos come up on the main feed, that way i can stay up to date without having to subscribe to 2 feeds (I just use live bookmarks on firefox, so could get crowded!).
    Definitely keep the videos coming, they’re really useful.


    Comment by Alex :: Web Design — February 16, 2008 @ 12:33 pm

  3. 3

    Gravatar

    i had this problem already some times and this is a nice solution, but what are you doing when you can not use such a background image because for example the design does not “allow” you this?

    And the screen-cast is also a nice thing ;-)


    Comment by stefan eder — February 18, 2008 @ 2:41 am

  4. 4

    Gravatar

    Please post new videos in the news if you can. I don’t subscribe and enjoy visiting the site. Thanks!


    Comment by Maximus — February 18, 2008 @ 12:29 pm

  5. 5

    Gravatar

    This trick was originally featured on alistapart.com in January 09, 2004 by Dan Cederholm

    http://www.alistapart.com/articles/fauxcolumns/

    -


    Comment by Alex Wolfe — February 18, 2008 @ 7:43 pm

  6. 6

    Gravatar

    There is a way to do this just with CSS. See http://riddle.pl/-/xhtml/css-equalcolumns/eqcolumns-wrong.html
    and
    http://riddle.pl/-/xhtml/css-equalcolumns/eqcolumns-okie.html.
    There is JQuery involved but only to change amount of content not to set height of columns.
    Explanation is here (only in Polish) http://perfectionorvanity.com/2007/03/07/rowne-kolumny-layoutu-css/.

    Screencast is good idea - keep it going :)
    Thanks!


    Comment by Dario — February 19, 2008 @ 4:58 pm

  7. 7

    Gravatar

    Hi Chris,

    I like your screencasts, but I think they drag on too long.

    If you could find parts to chop out to make them shorter that would be great.

    Or maybe it’s just my pitiful attention span. :/


    Comment by Barry — February 24, 2008 @ 11:10 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.