How to create multi column view in New Google Sites ?

Many times we have to display some content in column format. There are two ways to achieve it on Google sites:

  • Using the in-built auto grid to align three fields
  • Using embed to add three divisions

 

Method 1: In this method, simply adjust the text boxes by resizing to form a column view and after adding content it will look like:



But here you can’t add CSS attributes, yet!! For that following method 2 is perfect.

 

Method 2: To add multiple column view in your Google site website select embed option from the insert panel and then go to embed code division of the dialogue box appeared.

Write your code in the space provided. To add a multi-column view use this code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>Three Column CSS Layout</title>
    <style type="text/css">
        body {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 1;
            padding-right: 0;
        }
  
        #left {
            position: absolute;
            background-color: Orange;
            font-family: verdana;
            left: 5px;
            padding: 1px;
            top: 0px;
            width: 270px;
        }
  
        #center {
            margin-left: 290px;
            padding: 0px;
            margin-right: 320px;
            top: 0px;
        }
  
        #right {
            position: absolute;
            background-color: Crimson;
            font-family: arial;
            right: 15px;
            padding: 1px;
            top: 0px;
            width: 290px;
        }
    </style>
</head>
  
<body>
    <div id="left">
        <h3>Geeks For Geeks</h3>
        GeeksforGeeks is a Computer Science 
        portal for geeks. It contains well 
        written, well thought and well 
        explained computer science and 
        programming articles, quizzes etc.
    </div>
  
    <div id="center">
        <h3>Geeks For Geeks</h3>
        GeeksforGeeks is a Computer Science 
        portal for geeks. It contains well 
        written, well thought and well 
        explained computer science and 
        programming articles, quizzes etc.
    </div>
  
    <div id="right">
        <h3>Geeks For Geeks</h3>
        GeeksforGeeks is a Computer Science 
        portal for geeks. It contains well 
        written, well thought and well 
        explained computer science and 
        programming articles, quizzes etc.
    </div>
</body>
  
</html>

chevron_right


The page will look like: 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.