Create multiple columns

We know you can easily make columns in New Sites but dragging text boxes within a section. But they will always snap to the background grid for size.

You can control the column widths, regardless of the autogridding that Google Sites uses, by setting your columns in html.

You can also specify font, highlighted colour, etc.

HTML to go into embed code box.

<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: 0;

  padding-right: 0;

#left {

  position: absolute;

  background-color: #FFC0CB;

  font-family: verdana;

  left: 5px;

  padding: 0px;

  top: 0px;

  width: 270px;

#center {

  margin-left: 290px;

  padding: 0px;

  margin-right: 320px;

  top: 0px;

#right {

  position: absolute;

  background-color: #AFEEEE;

  font-family: arial;

  right: 15px;

  padding: 0px;

  top: 0px;

  width: 290px;

</style>

</head>

<body>

<div id="left">

Your left column will go here.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>

<div id="center">

The content of the centre column goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.

</div>

<div id="right">

Your right column will go here.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>

</html>

Google Sites

Report abuse