CSS column table e.g.

Question

On the same day that the tables were used to compose the content, setting up the layout type was simple. I AM.<table><tr><td>column 1</td><td>Column2</td></table>

I am trying to do the same with CSS (with Divs, etc.), however I am having difficulty maintaining two columns with the same size. Here is an example of what I'm saying: http://www.jsfiddle.net/ybYJ9/

What I'm trying to do is the column on the left (marked in blue) is the same size as the column on the right. The height of the column on the right will increase depending on the size of the content, so I cannot fix the size. I tried to set the column height to 100% and it does not work, if you can help with this, it would be great.

thank

Answer 1

- " ". / . , , . - , , . , , .

Answer 2

- - .

jQuery ( ), div div:)

Answer 3

CSS.

:

• faux columns -
• display: table, display: table-row display: table-cell, . , ,
• JS . ( ) jquery. JS, , height.

Answer 4

, 100%. Rebelek - , - jQuery.

(function ($) {
    $.fn.equalColumnHeights = function () {
        equalise = function (element) {
            var maxHeight = 0;
            $(element).children().each(function() {
                if ($(this).height() > maxHeight) {
                    maxHeight = $(this).height();
                }
            });
            $(element).children().height(maxHeight);
        };
        return this.each(function () {
            equalise(this);
            var element = this;
            $(window).resize(function () {
                $(element).children().height('');
                equalise(element);
            });
        });
    };
}(jQuery));

:

jQuery(function ($) {
    $('#mainBody').equalColumnHeights();
});

: http://www.jsfiddle.net/nathan/ybYJ9/9/ , JavaScript. : .

Answer 5

div JS. CSS display. 3 :

display: table;
display: table-row;
display: table-cell;

display: table div ( HTML <table> tag) display: table-row, display: table-cell

- :

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      1 cell
    </div>
    <div style="display: table-cell;">
      2 cell
    </div>
  </div>
</div>

But be careful, as not all browsers correctly handle these properties. Hope this helps.