0

I've got a problem as in this Question
CSS Two Columns of Lists - responsive merge into one column

The problem with this solution is when the items have different heights. Put in a <br> and you see what i mean. I am looking for a solution where the side by side cells have automatically the same height.

I created a fiddle that shows how the result should look like.
http://jsfiddle.net/w4n9da10/

Is it somehow possible to create this without using JavaScript or doubling the markup, like i did in my example?

Thanks in advance

Community
  • 1
  • 1
Mumpitz
  • 51
  • 5

1 Answers1

0

Utilizing a responsive framework such as Bootstrap will make your life a whole lot easier when it comes to doing something like this. However, I understand, sometimes it is not permitted by the client's environment or other restrictions. But, the concept remains. So all you have to do is use the browser inspector to see which classes are being used and their properties and use those only. But again, if you can use bootstrap, I recommend it.

I am attaching a demo HERE

And here is the code

<div class="wrapper">
    <div class="col-md-6 col-xs-12">
       <div id="1" class="col-md-12">1</div>
       <div id="2" class="col-md-12">2</div>
       <div id="2" class="col-md-12">3</div>
    </div>
    <div class="col-md-6 col-xs-12">
       <div id="3" class="col-md-12">4</div>
       <div id="4" class="col-md-12">5</div>
       <div id="2" class="col-md-12">6</div>
    </div>
</div>

Good luck

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • I also ran over such a solution. The problem is that you define fix heights. The content however is varying in height. – Mumpitz Nov 28 '14 at 12:06
  • And heigth:100% didn't solve it? If you enclose the entire thing in a class="row" you should be able to define the height dynamically so it doesn't overlap the bottom content – LOTUSMS Nov 28 '14 at 20:13
  • Could you provide an example? I don't know where you want the `class=row` to be in your markup. You mean changing the markup like the `class=list` in my fiddles `large` part? – Mumpitz Dec 02 '14 at 16:50
  • I updated the pen. It should work for what you are looking for. Test it out. p.s. Row wasn't needed. I was taking a wild guess first. Giving you something to think about. defining a row has helped me before create a padded height instead of a definite height. If you want a dynamic height you are going to need JQuery scripts – LOTUSMS Dec 02 '14 at 17:17