How To Use Float And Columns To Lay Out Content With CSS

Trang chủ » Html Css Two Column Text » How To Use Float And Columns To Lay Out Content With CSS

Có thể bạn quan tâm

Column content

When working with text content it can be helpful at times to adjust the layout so that the content is side by side, or even wrap from one column to the next. There are many ways to create columns with CSS, but only the columns property will divide the content of one element between different columns. In this section, you will use the columns property to create a two-column layout for the content to wrap. Then, you will use additional columns properties to create a dividing line between the columns and tell an element how to interact with the columns to force a column break.

To begin, open index.html and wrap the two paragraphs after <h2>Jelly Sugar Plum Chocolate Danish</h2> in a <div> element with a class property of column. The highlighted HTML in the following code block shows how this will look in your file:

index.html <!doctype html> <html> ... <body> <article> ... <h2>Jelly Sugar Plum Chocolate Danish</h2> <div class="column"> <p>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. </p> <p>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.</p> <p>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.</p> <p>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.</p> </div> <h2>Gingerbread Macaroon Fruitcake</h2> ... </article> </body> </html>

Save your changes to index.html, then return to styles.css in your text editor. When the content width is narrow, it is too small to be divided into columns. Instead, add a .column class selector within the min-width: 40rem media query. Then give the .column selector a columns property with a value of 2, as highlighted in the following code block:

styles.css ... @media (min-width: 40rem) { img { float: right; max-width: 50%; margin: 0 0 1rem 1rem; } .column { columns: 2; } } @media (min-width: 80rem) { ... }

Save the changes to styles.css and then refresh index.html in your web browser. The content of these two paragraphs will be separated into two columns with the first line of the second sentence at the bottom of the first column wrapping into the second column, as shown in the following image:

Two columns of paragraph text flowing from one column on the left into the second column on the right.

There are a handful of columns properties. The columns property itself is a shorthand combination of column-count and column-width. Should you need to define a specified width of the columns, it is important to know columns are always equal in size. There are also two companion properties to help with the visual presentation of the columns. The first is column-gap, which allows for specifying spacing between each column. The second property is called column-rule, which functions similarly to a border, but only draws a vertical line between the columns.

To add a custom gap and rule, open styles.css in your text editor. In the .columns selector block, add the column-gap property with a value of 2rem. Next, add the column-rule property with a value of 2px solid hsl(300, 50%, 90%), which will create a vertical rule line between the columns using the same color as the <hr /> element earlier. The highlighted HTML in the following code block shows how this will look in your file:

styles.css ... @media (min-width: 40rem) { img { float: right; max-width: 50%; margin: 0 0 1rem 1rem; } .column { columns: 2; column-gap: 2rem; column-rule: 2px solid hsl(300, 50%, 90%); } } @media (min-width: 80rem) { ... }

Save the changes to styles.css and refresh index.html in your web browser. The space between the columns has increased and in the middle of the gap is now a solid vertical rule line, as shown in the following image:

Two columns of text with a thin light purple line between the columns.

Lastly, it is possible to apply properties to the elements inside the column to influence how they interact with the layout. The paragraph in the first column has more space on it than the text in the second column. This is because of how the column interacts with the margin property and the default margin value on <p> elements. The :first-child pseudo-class can be used to change the margin-top of the first <p> element inside the column. Next, there are a few properties to control how column elements interact with the column flow: break-inside, break-after, and break-before. You will use the break-inside property with the value avoid, which tells the browser to prevent breaking apart the contents of the <p> elements.

Return to styles.css in your text editor to begin applying these new styles to the column content. Inside the media query, add a combinator selector consisting of .column p:first-child to scope the styles to the first <p> element inside the <div class="columns"> element. Then add the margin-top property set to a value of 0. Create a new combinator selector of .column p to apply these styles to all the <p> elements inside the <div class="columns"> element. Finally, add the break-inside property with a value of avoid to keep the columns from breaking apart the content. The highlighted CSS in the following code block demonstrates how to set this up:

styles.css ... @media (min-width: 40rem) { ... .column { columns: 2; column-gap: 2rem; column-rule: 2px solid hsl(300, 50%, 90%); } .column p:first-child { margin-top: 0; } .column p { break-inside: avoid; } } ...

Note: There are a some things to be aware of when it comes to using the break-inside, break-after, and break-before properties. While there is good browser support for these properties, the avoid value is the most well-supported, and the other values have mixed support. Additionally, the browsers that do support the avoid value will interpret when to break the column differently, causing varying layouts between browsers. Be cautious when using the property when visual parity is needed between browsers.

Save your changes to styles.css and refresh the page in your web browser. The second paragraph has now been forced fully into the first column. This may make the first column larger than the second, but the vertical rule accommodates the change. The first paragraph also now aligns at the top with the second column. The following image shows how this will look in most browser:

Two paragraphs of text, each in a different column, with a light purple vertical line between.

In this section, you used the columns property to create two columns of flowing content. You used the column-gap property to provide more space and column-rule to create a dividing line between the columns. Finally, you used the break-inside property to force how the elements interacted with the column flow. In the last section you will apply the columns property to an ordered list and adjust its presentation with media queries.

Từ khóa » Html Css Two Column Text