1 div into 2 separate div's with equal height using with jQuery?

Question

Is it possible 1 div into 2 separate div's with equal height using with jQuery? Its dynamic content, so we don't know the exact height of the content.

1. First find the outer div height and divide by 2 that outer div height(Using jQuery)
2. Second insert two child div's along with outer div (Using jQuery)

I already tried this below code:(Its word count method, but now I need content height method)

<script type="text/javascript">
$(document).ready(function() {
  $("#mydiv").each(function(div) {
   var div_height = $(this).text().split(' ');       
   var out = [];
    for (var i = 0; i < div_height.length; i += 105) {     
    out.push('<div class="wrapper">' + div_height.slice(i, i+105).join(' ') + '</div>' + '<br>');
    } 

   $(this).html(out.join(' '));
  });
});
</script>

Example: If outer div height is 100px, I will divide two inner divs with 50px(inner1) and 50px(inner2) height.

<div id="outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

to

<div id="outer">
  <div id="inner1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    
  <div id="inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

I think you meant to ask -- how does one split text in a element to fit a certain height. One can use this for the purpose to taking text in a <div/> and splitting it into two <div/>s.

The simple answer is - split the text in the middle, e.g.

var outer = $('outer');
var words = outer.text().split(' ');
outer.empty();
var inner1 = $('<div/>').addClass('inner').appendTo(outer);
var inner2 = $('<div/>').addClass('inner').appendTo(outer);
var middle = parseInt(words.length/2);
inner1.text(words.slice(0, middle).join(' '));
inner2.text(words.slice(middle));

Note that this assumes that outer only contains uniform text. If it contains styled elements or images, this gets more complicated. Even in the case of uniform text, it might produce a results that is off by a line here or there. Also, splitting by spaces might cut sentences in the middle, which may or may not suit your needs.

You could make this just finer by:

1. splitting your text in a finer manner. You can even go to the level of adding hyphens between syllables of words - again, depending on your need.
2. searching for the best place to split. I think a binary search for the number of words (or sentences, or whatever you decide to break your text into) is the quickest, simplest way to do this. I wrote a small example here. Also, see the question: How to get the real height of a text?.

You'll need to define your problem a bit better, if this doesn't answer your question.

Answer 2

Gsk, your question is very vague, but I think you are looking for columns. Check CSS3 for columns http://www.w3schools.com/css/css3_multiple_columns.asp

I am not 100% sure of the tables but it's worth looking into.

Answer 3

HTML:

<div id="outer">
    <div id="inner1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>    
    <div id="inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS:

#outer  {
    height: auto;
    padding: 0px:
}
#inner1  {
    margin: 0px;
}
#inner2  {
    margin: 0px;
}

Answer 4

use a class instead of ID on the inner div

    <style type = "text/css" >
    #outer{
    height:100%;
    min-height:set whatever you want.;
    }

    .inner{
     height: 50px;
    }
    </style>

    <div id = "outer">
    <div class = "inner"></div>
    <div class = "inner"></div>
    </div>

since the inner divs have the same format just use class instead of id..