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
< 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 >Beginner For Beginner</ h3 > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > < div id = "center" > < h3 >Beginner For Beginner</ h3 > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > < div id = "right" > < h3 >Beginner For Beginner</ h3 > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > </ body > </ html > |
The page will look like:
Contact Us