Text Book layout with css

Text Book layout with css

You can achieve textbook or bible layout with a little line of css codes with the coloumns and page-break

First have a parent container

<div>
</div>

Put your content inside the container and your html code looks like this

<div>
       <p> 
             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint temporibus, odit tempore numquam 
           dolores doloremque ea accusantium tenetur repudiandae quod ad nam mollitia vel quas cumque 
            error illo explicabo dicta!
       </p>
       <p> 
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint temporibus, odit tempore numquam 
             dolores doloremque ea accusantium tenetur repudiandae quod ad nam mollitia vel quas cumque 
             error illo explicabo dicta!
</p>
</div>

now we move to the css code to break the p tag into two columns

you give the div a fixed width of layout and we are giving the div 300px

div{
   columns:300px;
}

after to break the p

p{
    break-inside: avoid;
}

and with this we achive a two column layout for our website

Check out the preview