create css column layout

Posted under CSS3 Course On By mohammed.mutawe

css column layout

In the previous lesson, we talked about multi column in CSS and made a quick example of how to split text in an HTML tag, in this lesson we will add some simple styling features to our previous code.

 

Definition

We will add some changes to the private text just as in the following code:

    /*Width*/
column-rule-width: 4px;

/*Style*/
column-rule-style: dashed;

/*color*/
column-rule-color: #D9D9D9;
  • column-rule-width : Which is contains width of our separate lines between paragraph.
  • column-rule-style : Which is contains type of separate lines , CSS provide for as some type like : dashed , or dotted.
  • column-rule-color : Which denotes the color of these separated lines.

 

Benefits

We can summarize the benefits of using multi column  for:

  • Give aesthetic content to potential visitors to our page.
  • Ease of finding words while analyzing text.
  • Keep visitors away from feeling bored while reading.
  • Support for large screens by providing additional reading spaces.

 

Example

Please, to understand CSS multi columns styling well, copy the following codes and run it in your browser.

CSS

div{
    border:1px solid #D9D9D9;
    padding: 10px;
    -webkit-column-count:3;
    column-count:3;
    -webkit-column-gap: 50px;
    column-gap: 50px;

    /*Width*/			/*Here*/
    column-rule-width: 4px;

    /*Style*/
    column-rule-style: dashed;

    /*color*/
    column-rule-color: #D9D9D9;


}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>