phpwcms Support Forum

Code: Select all

#container {

	width: 955px;

	border: 0px solid gray;

	margin: 0px;

	margin-left: auto;

	margin-right: auto;

	padding: 0px;
	background-color: white;

}



#headerBlock {

	padding: 0px;

	margin-bottom: 0px;

	background-color: gray;

}



#mainBlock {
	width: 655px;

	padding-left: 0px;

	padding-right: 0px;

	margin-left: 138px;

	/margin-right: 200px;
	border-right: 1px solid gray;
	border-left: 1px solid gray;
	background-color: white;

}



#leftBlock {

	float: left;

	width: 135px;

	margin: 0px;

	margin-right: 0px;
	padding: 0px;

	background-color: white;

}



#rightBlock {

	float: right;

	width: 160px;

	margin: 0;
	/* border-left: 2px solid gray;
	border-bottom: 1px solid gray; */
	margin-left: 0px;

	padding: 0px;

	background-color: rgb(253,253,253);

}



#footerBlock {

	clear: both;

	padding: 0px;

	margin-top: 0px;
	border-top: 2px solid gray;

	background-color: #DCD6CC;

}

Code: Select all

<div class="wrapper">

<div class="wide top">
	{HEADER}

	<p>Based on <a href="http://www.positioniseverything.net/piefecta-rigid.html">Big John's Piefecta</a></p>
</div>

<div class="outer">

	<div class="wrap-cl">

		<div class="center"><div class="incenter">
			<h2>First in source</h2>
{CONTENT}
			<p>This center col is first in the source, being a right float within a left-floated wrapper. The left col (second in source) is floated left in that same wrapper, and following the wrapper is the right floated right col (third in source.)
			</p>

			<p>The headings and paragraphs are widthless and have 1px red borders to show any width problems in the columns.
			</p>
			<h3>Some Of The Features</h3>
			<div class="testfloat to-right">Here is a right float test box.</div>
			<p>Any column may be longest. All the columns are floated.
			</p>
			<p>This is a <a href="/test/indext1.shtml">test link</a>. <!-- This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. -->

			</p>
		</div></div> <!-- end center div -->

		<div class="left"><div class="inleft">
			<h2>Second in source</h2>
			<div class="testfloat to-left">Here is a left float test box.</div>{LEFT}
			<p class="alignright">
{LEFT}

This col is floated and also negatively margined to the left, so it is pulled out of its container except for a single pixel that is kept within the container.
			</p>

			<div class="testfloat to-right">Here is a right float test box.</div>
			<p>This is here to make this column longer. This is a <a href="/test/indext1.shtml">test link</a>. This is here to make this column longer. This is a <a href="/test/indext1.shtml">test link</a>. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer.
			</p>
		</div></div> <!-- end left div -->

	</div> <!-- end wrap-cl div -->

	<div class="right"><div class="inright">
		<h2>Third in source</h2>
		<div class="testfloat to-right">Here is a right float test box.</div>
		<p>This column is floated, and then negatively margined to the right, pulling it nearly outside its container just like the left column.
		</p>
		<div class="testfloat to-left">Here is a left float test box.</div>
		<p class="alignright">This layout works in: IE5+/Win, Opera 6+, Mozilla, IE5/Mac, Safari.
		</p>

		<p> This is a <a href="/test/indext1.shtml">test link</a>. This is a <a href="/test/indext1.shtml">test link</a>. <!-- This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. -->
		</p>
	</div></div> <!-- end right div -->

	<br class="clear" />
</div> <!-- end outer div -->

<div class="wide bottom">
	<p>bottom</p>
	<p><a href="./">CSS tests home</a></p>
	<div class="ap-test ap-left">
		<p>Here is an "absolute" box, which stays at the col bottom.</p>
	</div>
	<div class="ap-test ap-right">

		<p>AP. The side cols have bottom padding to avoid these boxes.</p>
	</div>
</div>

</div>

Code: Select all

#oben {
	position:relative;
	width:950px;
	height:300px;
	background-color:#352b27;}