How to arrange the dynamically generated content in two columns with equal height?

Question

Hi the below is the output what I am getting. SPECIALTIES is the heading. Let it be there.

I need the content that appeared after the heading SPECIALTIES to be arranged in 2 columns. enter image description here

I have used http://masonry.desandro.com/. As I am developing the page on XSLT I was not able to use the HTML initialization that represented on masonry. While initializing using Javascript, the feature is applicable only to the first section, means only for the content under SPECIALTIES. I have more sections like SPECIALTIES in a single page.

Do anyone have an idea to have the output as seen in the below image?

enter image description here

Update: I have tried the jquery initialization, it works for all only when i inspect the webpage:

here is the code:

<div class="MenuItemListDesc">
    <div class="MenuListItem">
      <h4>Ranch One Classic</h4>
      <p>Flame-grilled chicken, dressed mixed greena and roastedred pepper sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken & Cheese</h4>
    </div>
    <div class="MenuListItem">
      <h4>Spice Grilled Chicken</h4>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Philly</h4>
      <p>Flame-grilled chicken, mozzarella, sauteed peppers and onions on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Teriyaki Chicken Sandwich</h4>
      <p>Flame-grilled chicken, grilled pineapple, lettuce and sweet teriyaki sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Crispy Chicken Sandwich</h4>
      <p>Season, breaded chicken, romaine, tomatoes and mayonnaise ona toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Club</h4>
    </div>
  </div>

JQUERY INITIALIZATION:

var $container = $('.MenuItemListDesc');
// initialize
$container.masonry({
  columnWidth: 460,
  itemSelector: '.MenuListItem'
});

Here is my page: http://stage.ranchone.com/menu/index-revised.html

You can find it on the VIEW ITEM link on each section Thanks

JavaScript, typically, works on HTML not pictures. Could you post your ([relevant](http://stackoverflow.com/help/mcve)) HTML, CSS and JavaScript? Ideally *also* a [JS Fiddle](http://jsfiddle.net/), or similar, demo would be useful. — David Thomas, May 14 '14 at 16:11
@AbuIsaac have u tried simple column-count CSS: http://jsfiddle.net/LRvzC/ ? — Yuriy Galanter, May 14 '14 at 16:53
@Yuriy Galanter That helps me... Thank you very much. So I am using COLUMN-COUNT. Thanks again — Abu Isaac, May 14 '14 at 17:05
@YuriyGalanter can you add your comment as an answer so it's easier to find? Thx. — Erebus, Feb 04 '15 at 21:25

score 1 · Answer 1 · answered Feb 05 '15 at 15:44

1

You can use column-count CSS property

.MenuItemListDesc {
   -webkit-column-count:2; 
   -moz-column-count:2; 
   column-count:2; 
}

Demo: http://jsfiddle.net/LRvzC/

answered Feb 05 '15 at 15:44

Yuriy Galanter

38,833
15
69
136

How to arrange the dynamically generated content in two columns with equal height?

1 Answers1