Home > DeveloperSection > Forums > How to use Multi columns in css.
Ankit Singh

Total Post:341

Points:2389
Posted on    December-29-2015 10:37 PM

 CSS-CSS3 CSS 
Ratings:


 1 Reply(s)
 276  View(s)
Rate this:
I want to use Multi columns in css. How to this please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    December-29-2015 10:53 PM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick