HOW TO USE MULTI COLUMNS IN CSS.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
CSS 
 594  View(s)
Ratings:
Rate this:
I want to use Multi columns in css. How to this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use Multi columns in css.

    CSS3 supported multi columns to arrange the text as news paper structure.
    The most common used multi columns properties as shown below
    Description
    column-count Used to count the number of columns that element should be divided
    column-fill Used to decide, how to fill the columns
    column-gap Used to decide the gap between the columns
    column-rule Used to specifies the number of rules
    rule-color Used to specifies the column rule color
    rule-style Used to specifies the style rule for column
    rule-width Used to specifies the width
    column-span Used to specifies the span between columns

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sendmail.aspx.cs" Inherits="Forumasp.sendmail" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="SendMail" Visible="false" />
            <div>

                <style>
                    .multiColumn {
                        width: 800px;
                        padding: 5px;
                        background-color: #fff;

                        /* Column count property */
                        -webkit-column-count: 4;
                        -moz-column-count: 4;
                        column-count: 4;

                        /* Column gap property */
                        -webkit-column-gap: 40px;
                        -moz-column-gap: 40px;
                        column-gap: 40px;

                        /* Column style property */
                        -webkit-column-rule-style: solid;
                        -moz-column-rule-style: solid;
                        column-rule-style: solid;

                        /* Column style property */
                        -webkit-column-rule-color: #ff9900;
                        -moz-column-rule-color: #ff9900;
                        column-rule-color: #ff9900;

                        /* Column style property */
                        -webkit-column-fill: auto;
                        -moz-column-fill: auto;
                        column-fill: auto;
                    }
                </style>
                <div style="background: #ccc; padding: 5px; width: 810px;">
                    <div class="multiColumn">
                        Established in 2010 and headquartered in Allahabad, MindStick Software Pvt. Ltd. is a Microsoft ISV Gold Partner in software application development. Our expertise is in software product design, custom programming, database design, web design and programming and cutting edge mobile applications development.

    We have more than 45 clients all over the world and have a great diverse development team with all ages and background.

    When you choose MindStick Software Pvt. Ltd., you will gain an experienced strategic partner committed to collaborate for achieving your unique business and technology objectives, on-time and on-budget. As our clients, we understand your target objectives and design solutions suited to your distinct needs in the best possible manner. We adopt a progressive and positive approach that ensures satisfaction of all stakeholders in your business domain. Our rich and varied experience has the ability to endorse our assurance of competence and sustainability.

    We always serve at our best and like to produce 100% quality result with great efficiency. SDLC cycle standards are followed during entire software development phase. Our developers are highly motivated and experienced in product development, web programming and complex problem solving. We try to serve our customers in a very cost efficient way so that we can thrive together and enjoy great relationship. Having successfully delivered over hundreds of products and cutting-edge services‚ we have emerged as a strong and preferred partner to our vast clients.

    Whether it is taking on the development of a specific product‚ or creating a team dedicated to a client’s requirements‚ we work closely and collaboratively with our clients‚ meeting their unique needs. At every level‚ we do what it takes to enhance the experience of your customer.
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!