🎉 Before you dive into this article...
🚀 Check out our vibrant new community at CoderLegion.com!
💡 Share your knowledge, connect with like-minded developers, and grow together.
👉 Click here to join now!
HTML is the language in which the content of web pages is defined. Basically, it is a set of labels that are used to define the text and other elements that will make up a web page, such as images, lists, videos, etc.
HTML was originally created for informational purposes with text and some images. It was not believed that it could be used to create a multimedia space for entertainment and consultation (which is currently the web), so HTML was created without meeting all the possible uses that would have already been given to it. all groups of people who would use it in the future. However, despite this poor planning, if changes have been incorporated over time, these are HTML standards.
CSS is powerful enough to mimic outdated HTML tags. For example, you can create columns in CSS using the column-count property. This can be very useful for the layouts of a site, but also to divide long texts into columns.
In this tutorial we will see how to create columns with column-count.
Step 1 HTML
Create an HTML layout with the code below. Replace "Your text goes here" with your own text. This can be done in a Drupal node, a WordPress post or a Joomla article or simply where you need it.
Note that I am using the "content" class for the div. We'll use it to create the CSS selector in the next step.
Step 2 the CSS
In your CSS file, add the following code. This code will divide the text into 2 columns:
.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
The prefixes in the CSS above are intended for compatibility with specific browsers:
-webkit- for Chrome, Safari and Opera
-moz- for Firefox
Step 3 the space between the columns
You can define a space between columns by adding the property "column-gap"
.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}
Change the 60px according to your needs
Top comments (0)