CMS GRID: Need Help Modifying to Fixed, Liquid, Liquid

[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

[NashChristian]

Anybody?

[Lynne]

I'm not sure what you want. I just tried what you wrote an it works just fine on my home page. I have Categories on the left in a 200px column, the articles in the middle and that column expands/collapses with my browser window, and Recent Activity on the right in a 400px column. What is happening with your layout when you use that grid?

edit: whoops, just reread it about the 70% 30%. Let me see if I can give it a quick look.

[NashChristian]

Thanks!

[Lynne]

I did no styling, just a quick throw together and have only looked at it on firefox and Safari:

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

#gridl3_leftcol {
    float: left;
    width: 200px; /*controls width of left column*/
    position: relative;
    overflow: hidden;
}

</style>

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

[NashChristian]

Thanks Lynne!

I'll give it a try later!

So, will the "Layout Manager UI HTML" (top part of code) stay the same?

Thanks again for taking the time to help!

Jeff

[Lynne]

The Layout UI is just used for the Layout Manager. You don't really need it to be perfect at all as long as the column numbers match up between the two.

[NashChristian]

Unfortunately this doesn't seem to utilize the YUI Library at all, which is the direction vB has chosen for managing content layout, and still after hours of research, I can't find a workable solution.

Using your code above caused the right edge of my widgets to be cut off (as discussed in another thread), I lost the padding/margin on the center column (main content), and the main body "content columns" of "1x2 column" failed to render the second column, I'm assuming because it is YUI dependant, and YUI wasn't used in this grid. Anyhow, back to the drawing board.

Thanks anyway Lynne.


Does anybody know how to create this grid YUI compliant???

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

Ok....

I've been working on this ALL day... and I finally have it worked out to where I can use it. I used a combination of this code, a lot of research on YUI grids at Yahoo, and just a whole lot of experimentation. This is still a hack, surely not as intended at Yahoo, but seems to function. Here is what I ended up with below:

<div id="doc3" class="yui-tvb-l2" style="margin:.1%">
 <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_column1" style="margin-left:4%">$column[1]</ul>
     </div>
     <div class="yui-u yui-panel">
      <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
     </div>
    </div>
   </div>
  </div>
  <div class="yui-b yui-sidebar" style="width:200px">
   <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
  </div>
 </div>
</div>

The class="yui-tvb-l2" tells it that this has a fixed pixel left sidebar, but is actually a narrower dimmension than I want, but then I'm forcing it wider with the inline style. Then I have to compensate for the margin on the next unit cell. I also over-ride the standard "doc3" margin, so the content stays inline with header and footer elements, instead of being inset.

The only thing that really bugs me about this, but I can't figure out a way around, is my left sidebar is read last by the search engines, and since it contains my nav, it is most critical to me for SEO. I've tried putting it first, or using the first selector, both which break this grid. Oh well, at least it displays correctly.

YUI grids seem really simple IF you stick to the standard dimensions. Once you deviate, it is a totally different story!

If anyone has a recommendation on how I can do this "better", I'm all ears!

Thanks!
Jeff