css layout

Associate
Joined
8 Oct 2005
Posts
97
Location
Bristol
can anyone give me a few pointers on where im going wrong with this...

http://www.clearchaos.org/CSS/
(just playing with a sample layout)

basicaly i want a header , 3 columns (middle one at 100% height) and a footer that actually sticks to the bottom of the page

im trying to switch over from using tables but it seems to be rediculously browser dependant

is this layout possible even possible with css or is just down to me being a complete nubbin
 
Last edited:
Try this

This is a template I use quite a lot

very basic, but very effective

Code:
/* -------------------------------------- */
/* ---- Layout ----- */


body 	{  
	font-family: 'Verdana';
	color: #696767; /*main body font color */
	font-size: 14px; /*main body font size */
	text-align: center;
	padding: 0;
	margin: 0;
	background: #969494
	}
	
#container {
	width: 710px;
	\width: 730px;
	w\idth: 710px;
	margin: 0 auto 1 auto;
	padding: 0;
	background: #FFFFFF; /*changes middle window color*/
	}

#header {
	width: 700px;
	height: 200px;
	padding: 1;
	margin: 0;
	}

#content {
	float:left;
	width: 498px;
	margin: 0;
	padding: 0 10px 10px 10px;
	text-align: left;
	min-height: 700px; /* IE hack below */
	}
	
/* hide from IE/mac \*/
	* html #content, * html #content {
  	height: 608px;
  	he\ight: 608px;
	}
/* end hide */	

#navigation {
	float: right;
	text-align: right;
	width: 200px;
	margin: 0;
	padding: 0 10px 10px 10px;
	}

#footer {
	clear: both;
	width: 710px;
	\width: 730px;
	w\idth: 710px;
	color: #696767;
	font-size: 12px;
	text-align: center;
	padding: 3px 0 3px 0;	
	background: #969494; 
	}

The colours wont help you but you can adjust these as you wish

I find it useful to have to css files, layout (this one) and one for the text.

You can see the MAC / IE hack which allows the same view in IE to be displayed in firefox etc...

HTH
 
Last edited:
Back
Top Bottom