There's one familiar problem in web design which has been around ever since we moved from the days of table-based design into the CSS era, and that is: How can I have 100% height backgrounds in my flexible multi-column layout? There are a few solutions to this dilemma, however the one we're about to cover might be right for your project if you need: Background images, borders, CSS3 effects etc. applied to your columns More than three columns Flexible height and width columns Let's start with a quick look at the problem. Default Column Background Behaviour Pictured below is a simple three column layout, using a standard approach of floating each column to the left. With backgrounds applied in the default fashion, the columns adjust to the height of their content like so: This is functional, but not quite the most pleasing layout to the eye due to the significant difference in heights. The HTML for the above places three "column content" elements within a wrapper: ... ...
↧