3 Column Fixed-Liquid-Fixed

[sulasno]

How do I adjust the width of each column? tia

[Lynne]

Isn't there some CSS that came with the grid? Check in the templates for it.

[sulasno]

I am looking at

Styles & Templates
Style Manager

but I got no idea which one to adjust the width of the first column

When I go to the Main CSS

This CSS file is obsolete and is available here for reference purposes only.

[Lynne]

The grid you are using probably comes with css. You will need to figure out which grid template it is:
To find the grid template name, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code.

Now look at the template and see if there is css included at the top of it.

[sulasno]

I think the template that I need to alter is vbcms_grid_1

<style type="text/css">
#gridl3_container {
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	overflow: hidden;
}

#gridl3_midshift {
	float: left;
	width: 200%;
	position: relative;
	left: 170px;
}

#gridl3_rightshift {
	float: left;
	width: 100%;
	position: relative;
	left: 50%;
	margin-left: -340px;
}

#gridl3_midmask {
	float: right;
	width: 50%;
	position: relative;
	right: 100%;
}

#gridl3_midcol {
	margin-left: 340px;
	width: 100%;
	overflow: hidden;
}

#gridl3_leftcol {
	float: left;
	width: 170px;
	position: relative;
	margin-left: -50%;
	left: 170px;
	overflow: hidden;
}

#gridl3_rightcol {
	float: left;
	width: 170px;
	position: relative;
	left: 0px;
	overflow: hidden;
}

#gridl3_content {
	margin-right: 340px;
}
</style>

<div id="gridl3_container">
	<div id="gridl3_midshift">
		<div id="gridl3_rightshift">
			<div id="gridl3_midmask">
				<div id="gridl3_midcol">
					<div id="gridl3_content">
						<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
					</div>
				</div>
			</div>
			<div id="gridl3_leftcol">
				<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
			</div>
			<div id="gridl3_rightcol">
				<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
			</div>
		</div>
	</div>
</div>

But I don't know what has to be changed

--------------- Added [DATE]1267492013[/DATE] at [TIME]1267492013[/TIME] ---------------

after some experimenting, I found what I wanted;

First increase the width of the left column;
Move the centre column by the same amount of space and reduce the size so that it won't overlap into the right column

I wish there were more documentation