Theory
Theory
Comments

Pseudo-Columns on Gradients

One of the more interesting challenges of creating a layout is: how can we lay out columns that stretch downward so that they are the same height without using tables? This problem is related to the behavioral features of the block model, and it is illustrated in the images below:

The problem has to do with the behavior of the blocks in the layout. Desired behavior of blocks in the layout

There are several techniques for solving this problem, which are described in this article. By the way, we also borrowed these images from that article.

Let’s apply a gradient trick with sharp transitions that simulate stretched columns. Backgrounds that utilize these types of gradients are usually placed in a container of columns. The proportions of the gradients are selected to match the proportions of the columns so that they stretch the same.

The effect shown in the assignment can be more easily achieved with flexboxes.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Pseudo-Columns on Gradients</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container columns"> <div class="left"> <p>In the left column, the text has one length, and in the right column, the text has a different one. Since there is no way for neighboring blocks to know about each other’s height, it will not work to align them in height. This is one of the shortcomings of the block model.</p> </div> <div class="right"> <p> But you can insert a background behind them that shares the same color as them to create the illusion that the columns are equal.</p> </div> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; } .columns { background-image: none; } .container { margin: 20px auto; min-height: 380px; width: 300px; box-shadow: 1px 1px 3px #333333; color: white; } .container::after { display: table; clear: both; content: ""; } .left { float: left; width: 45%; background-color: #e74c3c; } .right { float: right; width: 45%; background-color: #3498db; } p { margin: 10px 0; padding: 0 10px; }

Goalscompleted

For .columns, set a linear left to right gradient with six colors: #e74c3c, #e74c3c, transparent, transparent, #3498db, #3498db. Yes, the colors are repeated two times.
Then assign the position 45% to the second and third colors as well as 55% to the fourth and fifth colors.
Then increase the width of .container to 400px,
And finally, add the columns class to body.

Pseudo-Columns on Gradients

Comments

Log in

Sign up

Restore access