Geek asks and answers

Html css 2 column layout, both columns are the same height automatically?

I have a two-column setup, and I want both columns to automatically stretch to populate the parent div of two columns. The reason is that in the left column there is a background and a border for it, and I want it to take the entire side of the page so that it does not look dirty and such. I use inline-block to align two columns, not float or anything (I cannot use overflow: hidden because it messed up some of my functions that might go out of a div, for example: dropdown menus). So I need to find an easy way to do this using this method.

jsfiddle:

http://jsfiddle.net/sFBGX/

+1
source share
2

CSS ( HTML, )

. http://jsfiddle.net/PhilippeVay/sFBGX/2/

IE8 + IE6/7, , , inline-block

: , faux-columns ( )

+9

: http://jsfiddle.net/scrimothy/Y2ZsJ/

css:

.container { overflow: hidden; }
.container div { 
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

(from: http://css-tricks.com/fluid-width-equal-height-columns/ : True Layout)

0

More articles:


All Articles