Question 43717 in Html Question posted in
Some basic documentation can be found here.

How to make text in two column – Html

I need a two column page

I need something like where div, p and h1 go to the second column when I get to the bottom of the page when I print.

Example: https://i.stack.imgur.com/IfdK4.jpg

Tags:

2

Answers


  1. 0

    You can use the column-count css property on the parent div for specifying the number of columns.

    Please refer below sample code :

    .container {
  column-count: 2;
}
    <div class="container">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fusce ut placerat orci nulla pellentesque dignissim. Odio eu feugiat pretium nibh ipsum consequat. In hendrerit gravida rutrum quisque non tellus. Bibendum enim facilisis gravida neque. Ultrices in iaculis nunc sed augue. Suscipit adipiscing bibendum est ultricies. Adipiscing tristique risus nec feugiat in fermentum posuere. Eget nunc scelerisque viverra mauris. Urna et pharetra pharetra massa massa. Pharetra massa massa ultricies mi quis hendrerit dolor. Amet est placerat in egestas. Congue quisque egestas diam in arcu. Leo vel orci porta non pulvinar neque laoreet suspendisse. Erat nam at lectus urna.

Platea dictumst quisque sagittis purus sit amet volutpat. Pulvinar sapien et ligula ullamcorper malesuada proin libero. Sit amet purus gravida quis blandit turpis. Id eu nisl nunc mi ipsum faucibus. Justo donec enim diam vulputate ut. Nibh sed pulvinar proin gravida hendrerit lectus a. Sagittis aliquam malesuada bibendum arcu vitae. Pretium vulputate sapien nec sagittis aliquam. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Lobortis scelerisque fermentum dui faucibus in. Velit scelerisque in dictum non consectetur a. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Ligula ullamcorper malesuada proin libero.

Risus viverra adipiscing at in tellus integer. Ultrices tincidunt arcu non sodales. Facilisi nullam vehicula ipsum a. Nam aliquam sem et tortor consequat id porta. Consectetur adipiscing elit duis tristique sollicitudin. Id consectetur purus ut faucibus pulvinar elementum integer. Senectus et netus et malesuada fames ac turpis egestas maecenas. Rutrum quisque non tellus orci ac auctor. Mi proin sed libero enim sed faucibus. Congue nisi vitae suscipit tellus. Aliquam sem fringilla ut morbi. Vivamus at augue eget arcu dictum varius duis at. Hac habitasse platea dictumst quisque sagittis purus sit.

Aliquam faucibus purus in massa tempor. Non arcu risus quis varius quam quisque id diam. Lobortis scelerisque fermentum dui faucibus. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Cras semper auctor neque vitae tempus quam pellentesque nec. Feugiat vivamus at augue eget arcu dictum varius duis. Duis ut diam quam nulla porttitor massa id neque aliquam. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.

Elit eget gravida cum sociis natoque penatibus et magnis. Est placerat in egestas erat imperdiet sed euismod nisi. Ipsum a arcu cursus vitae congue mauris rhoncus. Sagittis aliquam malesuada bibendum arcu vitae elementum. Congue eu consequat ac felis donec et odio pellentesque. Quis varius quam quisque id diam. Mi ipsum faucibus vitae aliquet. Mi sit amet mauris commodo quis. Euismod quis viverra nibh cras pulvinar mattis. Vitae proin sagittis nisl rhoncus. Fringilla ut morbi tincidunt augue interdum velit. Nullam eget felis eget nunc. Adipiscing at in tellus integer feugiat scelerisque.
</div>
    Login or Signup to reply.
  2. 0

    Use column-count: 2; to specify the element into two columns and column-gap to specify the gap between two columns.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search