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.
Links from video:
This seems a little un-semantic. There must be another way, right?
Very late to the party; just going through old podcast episodes that seem to have slipped through the cracks.
Alfred, since it’s only visually important to vertically extend the background on the sidebar, it is okay to do what Chris has done. It’s totally unimportant for the content or to someone who doesn’t process the webpage visually how tall the sidebar background is.
This is my solution of divs with equal height http://tomasjerabek.blogspot.com/2012/05/divs-with-equal-height.html
Hi.
This was quite good, but unfortunately useless as nowadays there is almost no layout that would take its height and width across all the screen. Usually we have only 980px width area that is centered on the screen, with some header, two-three columns and a footer area. I can imagine of having some content wrapper (between the header and footer) area tha would have styles applied all the way You did to the body, but I don’t think that using a bg image for that is the best way…
Anyway, watching You videos I want to ask a question: when You cut of some background image that should be x or y repeated You almost always cut it of somehow big to me. I intend and prefer the horizontaly repeated images to have the width of 1px (and verticaly height of 1px) to have this bg image as small as possible. Why do You cut these images so “big”?
Thank You for Your reply, Chris.
Peter.
Great tricks, really like it.