locked
How to split my screen into three columns

    Question

  • I want my html app screen to be split into three columns, how to achieve this?

    I need some code sample.

    Thanks.


    Pradeep AJ

    Monday, June 24, 2013 2:42 AM

Answers

  • Use a CSS grid. The main element (a top-level div) would be the grid containing three columns, and child divs would be assigned to each. So assuming you have HTML as follows:

    <div id="mainContent">
      <div id="column1"></div>
      <div id="column2"></div>
      <div id="column3"></div>
    </div>
    

    You'd style as follows:

    #mainContent {
        width: 100%;
        height: 100vh; /* 100% viewport height */
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr; /* Three proportional columns with */
        -ms-grid-rows: 1fr; /* One row */
    }
    
    #columnn1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    
    #columnn2 {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    
    #columnn3 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    

    If you wanted to add space between the columns, you can use margins and padding, of course, or you can add other columns for that. For example, to add 20px between each column, use -ms-grid-columns: 1fr 20px 1fr 20px 1fr in #mainContent and adjust #column2 and #column3 to be in -ms-grid-column: 3 and 5, respectively.

    Just to note, the other answer given here is for organizing text within a single div into multiple columns, where the text in the element would flow between the columns. I'm assuming you want three independent columns. Also note that -moz* and -webkit* styles are ignored by Store apps so there's no need for them (unlike websites that have to contend with multiple browers).

    Both CSS grid and multi-column text are discussed in Chapter 6 of my book below.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Proposed as answer by Dave SmitsMVP Monday, June 24, 2013 11:59 PM
    • Marked as answer by Pradeep AJ Tuesday, June 25, 2013 2:06 AM
    • Unmarked as answer by Pradeep AJ Tuesday, June 25, 2013 2:12 AM
    • Unproposed as answer by Pradeep AJ Tuesday, June 25, 2013 2:12 AM
    • Proposed as answer by Ealsur Tuesday, June 25, 2013 12:25 PM
    • Marked as answer by Pradeep AJ Tuesday, June 25, 2013 2:35 PM
    Monday, June 24, 2013 6:20 PM

All replies

  • div.oneCols{
    -moz-column-count:1;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 1;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 1 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    div.twoCols{
    -moz-column-count:2;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 2 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    div.threeCols{
    -moz-column-count:3;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 3 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.fourCols{
    -moz-column-count:4;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 4 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.fiveCols{
    -moz-column-count:5;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 5;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 5 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.sixCols{
    -moz-column-count:6;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 6;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 6 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    


    Rob^_^

    • Marked as answer by Pradeep AJ Tuesday, June 25, 2013 2:06 AM
    • Unmarked as answer by Pradeep AJ Tuesday, June 25, 2013 2:23 AM
    Monday, June 24, 2013 3:43 AM
  • Use a CSS grid. The main element (a top-level div) would be the grid containing three columns, and child divs would be assigned to each. So assuming you have HTML as follows:

    <div id="mainContent">
      <div id="column1"></div>
      <div id="column2"></div>
      <div id="column3"></div>
    </div>
    

    You'd style as follows:

    #mainContent {
        width: 100%;
        height: 100vh; /* 100% viewport height */
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr; /* Three proportional columns with */
        -ms-grid-rows: 1fr; /* One row */
    }
    
    #columnn1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    
    #columnn2 {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    
    #columnn3 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    

    If you wanted to add space between the columns, you can use margins and padding, of course, or you can add other columns for that. For example, to add 20px between each column, use -ms-grid-columns: 1fr 20px 1fr 20px 1fr in #mainContent and adjust #column2 and #column3 to be in -ms-grid-column: 3 and 5, respectively.

    Just to note, the other answer given here is for organizing text within a single div into multiple columns, where the text in the element would flow between the columns. I'm assuming you want three independent columns. Also note that -moz* and -webkit* styles are ignored by Store apps so there's no need for them (unlike websites that have to contend with multiple browers).

    Both CSS grid and multi-column text are discussed in Chapter 6 of my book below.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Proposed as answer by Dave SmitsMVP Monday, June 24, 2013 11:59 PM
    • Marked as answer by Pradeep AJ Tuesday, June 25, 2013 2:06 AM
    • Unmarked as answer by Pradeep AJ Tuesday, June 25, 2013 2:12 AM
    • Unproposed as answer by Pradeep AJ Tuesday, June 25, 2013 2:12 AM
    • Proposed as answer by Ealsur Tuesday, June 25, 2013 12:25 PM
    • Marked as answer by Pradeep AJ Tuesday, June 25, 2013 2:35 PM
    Monday, June 24, 2013 6:20 PM
  • Use a CSS grid. The main element (a top-level div) would be the grid containing three columns, and child divs would be assigned to each. So assuming you have HTML as follows:

    <div id="mainContent">
      <div id="column1"></div>
      <div id="column2"></div>
      <div id="column3"></div>
    </div>
    

    You'd style as follows:

    #mainContent {
        width: 100%;
        height: 100vh; /* 100% viewport height */
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr; /* Three proportional columns with */
        -ms-grid-rows: 1fr; /* One row */
    }
    
    #columnn1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    
    #columnn2 {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    
    #columnn3 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    

    If you wanted to add space between the columns, you can use margins and padding, of course, or you can add other columns for that. For example, to add 20px between each column, use -ms-grid-columns: 1fr 20px 1fr 20px 1fr in #mainContent and adjust #column2 and #column3 to be in -ms-grid-column: 3 and 5, respectively.

    Just to note, the other answer given here is for organizing text within a single div into multiple columns, where the text in the element would flow between the columns. I'm assuming you want three independent columns. Also note that -moz* and -webkit* styles are ignored by Store apps so there's no need for them (unlike websites that have to contend with multiple browers).

    Both CSS grid and multi-column text are discussed in Chapter 6 of my book below.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Hi Kriag,

    Thanks for your reply.

    <body>
       <div id="mainContent">
      <div id="column1">hi</div>
      <div id="column2">hi2</div>
      <div id="column3">hi3</div>
    </div>
    
    
    body {
    #mainContent{
        width: 100%;
        height: 100vh; /* 100% viewport height */
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr; /* Three proportional columns with */
        -ms-grid-rows: 1fr; /* One row */
       }
    
    #columnn1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    
    #columnn2 {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
    
    #columnn3 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    
    }
    }

    I tried yours but the output when i used the above code is :

    hi

    hi1

    hi2

    But what i need to do is, want to split the entire screen into three equal columns and going to place my elements there.

    Sorry if i tried wrong, i am new to html apps.


    Pradeep AJ

    Tuesday, June 25, 2013 2:20 AM
  • div.oneCols{
    -moz-column-count:1;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 1;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 1 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    div.twoCols{
    -moz-column-count:2;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 2 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    div.threeCols{
    -moz-column-count:3;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 3 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.fourCols{
    -moz-column-count:4;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 4 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.fiveCols{
    -moz-column-count:5;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 5;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 5 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    div.sixCols{
    -moz-column-count:6;
    -moz-column-gap: 20px;
    -moz-column-rule-color:gray;
    -moz-column-rule-style:solid;
    -moz-column-rule-width: 1px;
    -moz-column-width: auto;
    -webkit-column-count: 6;
    -webkit-column-gap: 20px;
    -webkit-column-rule-color: gray;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-width: auto;
    columns: 6 auto; 
    column-rule: 1px solid gray; 
    column-gap: 20px; 
    column-fill: auto;
    height: auto;
    }
    
    


    Rob^_^

    Copied your code to .css file and tried this,

        

    <body>

      <div id="threeCols"></div>


    </body>c

    but i didnt get the desired output. Can you please guide me in detail.


    Pradeep AJ

    Tuesday, June 25, 2013 2:24 AM
  • Hi,

    The style that you show is not the one that Kraig advised, the #column2 that he wrote had row:1 and column:2, you wrote row:2, column:2.

    Also, the style should be in your .css file with no "body {" added, just copy what he wrote in your .css file, and put the HTML in your .html file.

    His answer works :)

    Tuesday, June 25, 2013 12:25 PM
  • Hi Kraig, 

    Is there any books like that for C#/XAML?


    Pradeep AJ

    Tuesday, June 25, 2013 2:42 PM
  • There are a number of C#/XAML books out there, but not a free ebook like mine. I don't have a specific one to recommend though, as I haven't really looked at them.
    Tuesday, June 25, 2013 10:26 PM
  • Thanks for your reply

    Pradeep AJ

    Wednesday, June 26, 2013 1:37 AM