[NashChristian]

Hello.

I'm one of those old school "table/row/cell" people, who still don't quite "get it" with CSS page structure, such as "grids".

I took one of the stock grids (Fixed, Liquid, Fixed) and played with the numbers until I got the screen to be proportioned the way I want (on my screen), however I need help changing the code so that third column will also be liquid, that way on a narrower screen the page columns will stay proportional, except for the first column which I want a fixed 200px wide, due to image widths used in that column.

What I'm shooting for is a Fixed (200px), Liquid (70%), Liquid (30%) grid. I basically want it to look the same as it does currently. Here is a screen shot:




Here is the code I'm currently using to make the existing grid (Fixed 200px, Liquid, Fixed 400px):

Layout Manager UI HTML
This is the HTML that is used within the Layout Manager for placing widgets on the layout:

<div id="doc3" class="yui-tvb-l3">
	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
				<div class="yui-gc">
					<div class="yui-u first yui-panel">
						<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
					</div>
					<div class="yui-u yui-panel">
						<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="yui-b yui-sidebar">
			<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
		</div>
	</div>
</div>

Default Template HTML
This is the HTML that is used by the CMS on the front end. Widgetlist locations should match those in the Layout Manager UI HTML:

<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: 200px; /*controls margin from far left side to left edge of center column (forces left column)*/
}

#gridl3_rightshift {
	float: left;
	width: 100%;
	position: relative;
	left: 50%;
	margin-left: -400px; /*controls padding before left column (higer negative number = less padding)*/
}

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

#gridl3_midcol {
	margin-left: 420px; /*controls margin from far left side to left edge of center column - 20px gutter*/
	width: 100%;
	overflow: hidden;
}

#gridl3_leftcol {
	float: left;
	width: 200px; /*controls width of left column*/
	position: relative;
	margin-left: -50%;
	left: 200px; /*not sure what this controls*/
	overflow: hidden;
}

#gridl3_rightcol {
	float: left;
	width: 400px; /*controls width of right column*/
	position: relative;
	left: -200px; /*need to adjust this margin relative to column width adjustment above*/
	overflow: hidden;
}

#gridl3_content {
	margin-right: 640px; /*controls right edge of center column - 40px gutter (gutter must be twice what it is on the left side)*/
}
</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>

Can someone PLEASE help "spell it out" for me, detailing percisely how I need to change this code in order to create the grid I'm going for? Again, I'm trying to create a Fixed (200px), Liquid (70%), Liquid (30%).

All help will be GREATLY appreciated!

Thanks!
Jeff