BeWebmaster

Create three column CSS layout using BeWebmaster CMS

Ad

Using BeWebmaster CMS GUI interface you can easily create three column CSS layout. If you look at BeWebmaster CMS demo 1 or demo 2 you'll notice that the default is two column layout. To make it into three column layout follow these steps.

Login to BeWebmaster CMS demo and click Layout button.

1. In the left pane locate and click on Right Column link.

2. At the top of the main pane you'll see CSS properties of selected element. 

Select #rightcolumn.

3. Click New Style button located on the right side (not displayed in the screenshot)

From the drop-down menu select width. In the value field type how wide you'd like the third column to be. For example 150px. Make sure you include the measurement type i.e. px, %, auto.

Click submit button. You'll notice in the preview pane that the width of the third column changed. Now we need to position the third column.

4. Click New Style button.

From the drop-down menu select float and give it a value "right:

Click submit button.

Follow steps 3 and 4 and select additional styles to customize appearance of the third column. You may want to add borders and padding.

The height of the column will depend on the amount of the content you put in the right column.

To add content, click on the edit content to open HTML editor for the right column.

Type your content and click save button.

Click on Right Column link to preview your work.

This is pretty much it. All that is left is add styles and content to the third column until desired result is reached.