flow 2 columns of text automatically with CSS
Using jQuery
Create a second column and move over the elements you need into it.
<script type="text/javascript">
$(document).ready(function() {
var size = $("#data > p").size();
$(".Column1 > p").each(function(index){
if (index >= size/2){
$(this).appendTo("#Column2");
}
});
});
</script>
<div id="data" class="Column1" style="float:left;width:300px;">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!-- data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>
Update:
Or Since the requirement now is to have them equally sized. I would suggest using the prebuilt jQuery plugins: Columnizer jQuery Plugin
http://jsfiddle.net/dPUmZ/1/
CSS layout 2 columns in one div with text flowing over into other column
You can absolutely do it with CSS3. Unfortunately I'm not sure how well IE handles this, but a shim or something might help with that.
HTML
<div class="twocolumns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mauris nec nisi tristique condimentum vitae sed orci. Vestibulum luctus hendrerit sem, ut sodales nibh rhoncus a. Mauris a diam mollis ante auctor aliquam. Sed cursus interdum nisl at condimentum. Cras gravida nulla sit amet nisi fringilla bibendum. Suspendisse blandit scelerisque arcu euismod facilisis. Sed ultrices tincidunt commodo. Phasellus sed justo libero. Donec venenatis sapien eu arcu feugiat vulputate. Praesent tortor mauris, tincidunt non venenatis sit amet, ultricies ac lacus. Praesent fermentum pharetra posuere. Quisque eget blandit lacus. Suspendisse eget diam justo. Donec eu urna nec metus consequat pellentesque id nec leo. Nam sodales sapien id tellus rhoncus pellentesque. Ut fringilla imperdiet rhoncus.</div>
CSS
.twocolumns {
padding:10px;
width:80%;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
jsFiddle
How to get word processor like column-orientated text-flow via HTML+CSS?
You can create a container having column-count: 3
to create three columns with continuous, automatic text flow.
But since there are no pages in HTML, there is no second page to continue.
And it's not possible to have text content flow dynamically from one container (div, span, p, whatever) into another one (i.e. the way text flows from page 1 to page 2 in a Word document or similar).
How to split into new column via multi-column layout only when text is overflowing
You need to set height
to .text
so it would know when to move to the next column:
.content {
height: 90vh;
}
.text {
height:100%;
width: 300px;
column-count: 1;
}
<div class="content">
<div class="text">
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
</div>
</div>
Related Topics
Web Workers Without a Separate JavaScript File
Difference Between HTMLcollection, Nodelists, and Arrays of Objects
How to Mock an Es6 Module Import Using Jest
Redirect Parent Window from an Iframe Action
How to Query Mongodb Objectid by Date
How Might I Find the Largest Number Contained in a JavaScript Array
How to Get the Mouse Position Without Events (Without Moving the Mouse)
Can JavaScript Connect with MySQL
How to Be Notified When an Element Is Added to the Page
React: Script Tag Not Working When Inserted Using Dangerouslysetinnerhtml
Retrieving File Names Out of a Multi-File Upload Control with JavaScript
Jquery - How to Select by Attribute
Html5 Video Not Streaming and Taking 90 Seconds to Load