We have equal height columns on several projects. The height of these columns needs to adjust dynamically when the content grows. We need to implement this on LB. It might be achieved using javascript. But this is not a good solution.

We could use tables. But tables are for tabular data, not for layout. Browsers start displaying tables after they read all table. so layout in table will start displaying after whole page is loaded.

Again, we need to support cross browsers also. There are many CSS hacks available. But we can implement this using pure CSS.
There are a few ways to make the columns appear equal in length, regardless of the content that they contain. Faux column(http://line25.com/articles/create-sidebars-of-equal-height-with-faux-col...) is a popular and most simple solution. Here, a background image is used to give the illusion of same column heights.

The nested div solution(http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-cs...) is the best options to address this issue. It uses several nested divs containers. Then, we will apply positioning on those containers. It supports several columns. You can also see this solution(http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm).

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.