CODEWITHSUNDEEP
jqueryhtmlcss
Steve
Steve

Reputation: 2586

Automatic two column layout for div's content through CSS

Within my site, the content is entered through a WYSIWYG editor by a user. A user can enter either a list (ul, li) or several paragraphs <p>.

My problem is that I want to show whatever a user enters in a two column format.

For example, if this is what user enters in:- 

    <ul>

    <li>
   Nisi turpis consectetur orci lacinia quam a scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    <li>Scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    <li>Ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    </ul>

Is it possible to show it in a two column format? Like this:- enter image description here

Upvotes: 1

Views: 56

Answers (1)

Ashok
Ashok

Reputation: 299

yes using css Multiple Columns it's possible to make automatic two column layout

.multiple{
  -moz-column-count: 2 ;
-webkit-column-count: 2 ;
column-count: 2 ;
-moz-column-gap: 39px ;
-webkit-column-gap: 39px ;
column-gap: 39px ;
-moz-column-rule: 0px dotted #FF0000 ;
-webkit-column-rule: 0px dotted #FF0000 ;
column-rule: 0px dotted #FF0000 ; text-align:justify;
    }
<div class="multiple">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus posuere justo ut rutrum. Vestibulum arcu metus, bibendum eu tortor at, adipiscing posuere nibh. Fusce sit amet nulla et libero pulvinar auctor. Donec sed euismod justo, ut </p>
<h2>consectetur adipiscing elit.</h2>
<ul>

    <li>
   Nisi turpis consectetur orci lacinia quam a scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    <li>Scelerisque hac ultricies a ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    <li>Ullamcorper massa a habitant tempor etiam non.Fermentum vel vestibulum nunc dapibus elit torquent viverra euismod vel.</li>

    </ul>
    
    <h3>consectetur adipiscing elit.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus posuere justo ut rutrum. Vestibulum arcu metus, bibendum eu tortor at, adipiscing posuere nibh. Fusce sit amet nulla et libero pulvinar auctor. Donec sed euismod justo, ut </p>
</div>

Upvotes: 1

Related Questions