Skip to content
Related Articles

Related Articles

How to create multi column view in New Google Sites ?
  • Last Updated : 10 Sep, 2020

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




<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>

The page will look like: 

My Personal Notes arrow_drop_up
Recommended Articles
Page :