Theory
Theory
Comments

Pseudo-Columns on Gradients

One of the more interesting challenges of creating a layout is: how can we lay out columns so that they extend to the same height without using tables? This problem is related to the behavior of the floated columns in this example, 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 their backgrounds appear to extend to the same height.

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

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. In this floated layout, neighboring blocks do not automatically match each other’s height, so they will not be equal in height. This is one of the shortcomings of using floats for columns.</p> </div> <div class="right"> <p> But you can insert a background behind them that uses the same colors as the columns to create the illusion that the columns are equal in height.</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