Designs Advice » CSS

3 Column same height CSS layout

8 posts replies – Latest post: 3 years by drew

  • This topic is resolved

    1. zar36

      Member

      Hi,
      I am trying to get the 3 columns to end at the same spot at the bottom to the column has the longest height.
      I have tried the tutorials online but can't get it to work. I'm new at this and am really having difficulties figuring it out on my own.

      Thanks

      Posted 3 years ago # Link

    2. drew

      Member

      Javascript will make the colums all the same height, or you can use a technique called "faux columns". Faux columns uses a background image to make the columns appear to be the same length.

      Posted 3 years ago # Link

    3. fatboyjim

      Moderator

      Hey there, Have you tried Floatutorial?

      http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

      Posted 3 years ago # Link

    4. zar36

      Member

      That float tutorial was really helpful. I also read this http://alistapart.com/articles/fauxcolumns/. I guess what I was trying to achieve was something in the way of height="100%", but thats not the approach using css layout. I managed to get the look I wanted using background styles :)

      Posted 3 years ago # Link

    5. drew

      Member

      Another useful link

      http://www.paulbellows.com/getsmart/balance_columns/

      Posted 3 years ago # Link

    6. fatboyjim

      Moderator

      Have you tried applying overflow: hidden and height: 1% to a container div.

      Posted 3 years ago # Link

    7. colourdreamer
      No uploaded avatar
      Member

      I came here hoping to answer some questions, but now I want to ask, "what does height: 1% do to a container div?"

      Posted 3 years ago # Link

    8. drew

      Member

      it is because of the IE6 & 7 'Peek-a-boo bug'

      http://www.positioniseverything.net/explorer/peekaboo.html

      Posted 2 years ago # Link

    RSS feed for this topic

    Reply

    You must log in to post.