Categories
CSS Web development

How to create equal height columns with CSS?

How to create equal height columns with CSS?

If you want to achieve an equal height of columns (side by side), follow the steps below:

Demo:

Column 1

Some other text..

Column 2

Some other text..

Some other text..

Some other text..

Some other text..

Column 3

Some other text..

Some other text..


Step1.

Add HTML

Create the column container and add three columns:

<div class="column-container">
  <div class="column" style="background-color:#e9c46a">
    <h2>Column 1</h2>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#2a9d8f">
    <h2>Column 2</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#e9c46a">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Step2.

Add CSS

Set the display property values to “table” for the container, and “table-cell” for elements inside the container:

.column-container {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding: 16px;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media only screen and (max-width: 600px) {
  .column { 
    display: block;
    width: 100%;
  }
}

Enjoy coding!

Categories
CSS Web development

CSS Multi-column Layout

CSS Multi-column Layout

Demo:

To create the Multi-column layout you can use the following properties:

To create multiple columns, use the CSS column-count property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-1 {
  column-count: 3;
}
</style>
</head>
<body>

<div class="text-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To define the gap between columns, use the CSS column-gap property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-2 {
  column-count: 3;
  column-gap: 30px;
}
</style>
</head>
<body>

<div class="text-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To define the style of the rule between columns, use the CSS column-rule-style property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-3 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
}
</style>
</head>
<body>

<div class="text-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To define the colour and width of the rule between columns, use the CSS column-rule-color property and CSS column-rule-width property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-4 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
  column-rule-color: #2a9d8f;
  column-rule-width: 5px;
}
</style>
</head>
<body>

<div class="text-4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Define how many columns an element should span by using the CSS column-span property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-4 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
  column-rule-color: #2a9d8f;
  column-rule-width: 5px;
}
.h4 {
  text-align: center;
  column-span: all;
    }

</style>
</head>
<body>

<div class="text-4">
<h4 class="h4">Lorem Ipsum Dolor Sit Amet</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To define the column width, use the CSS column-width property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-5 {
  column-width:150px;
}

</style>
</head>
<body>

<div class="text-5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Enjoy coding!

Categories
CSS Web development

CSS column-rule-color Property

CSS column-rule-color Property

The CSS column-rule-color property defines the color of the rule between columns.

Syntax:

column-rule-color: color;

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-color: #e76f51;
}
</style>
</head>
<body>

<h4>The column-rule-color Property:</h4>

<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

The column-rule-color Property:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Enjoy coding!

Categories
CSS Web development

CSS column-span Property

CSS  column-span Property

The CSS column-span property defines how many columns an element should span across.

Syntax:

column-span: none|all;

none (default) – the element span across one column.

all – the element span across all columns.

Demo (column-span: none, and all) :

Click the “Try it” button to make the h4 element span over all columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  column-count: 3;
}

.heading {
  column-span: all;
  text-align: center;
}
</style>
</head>
<body>

<div class="text">
<h4 class="heading">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Let the <h4> element span across all columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Enjoy coding!

Categories
CSS Web development

CSS Columns property

CSS Columns property

The CSS columns property is a shorthand property for:

CSS column-width property

CSS column-count property

Syntax:

columns: auto|column-width column-count;

auto (default) – sets both the column-width and column-count to “auto”.

column-width – specifies the minimum width for each column.

column-count – specifies the maximum number of columns.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  columns: 100px 3;
}

</style>
</head>
<body>

<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Set the minimum width for each column to 100px, and the maximum number of columns to 3:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Enjoy coding!