Sto cercando di creare il seguente:
codice:
WSHeader
WSNavigator, WSContent
WSFooter
in cui vorrei ottenere i seguenti:
  • WSHeader è fluido al 100%;
  • nel codice html WSContent DEVE apparire prima di WSNavigator (questo perché voglio che l'ENTER sia catturato da un suo submit piuttosto che da WSNavigator);
  • WSNavigator ha una larghezza fissa in pixel o elastica in em: è ancorato col suo bordo sx al bordo sx di WSHeader;
  • WSContent è ancorato a WSNavigator. Il suo bordo sx coincide (a meno di un offset prefissato) con il bordo destro di WSNavigator. La Larghezza di WSContent è fluida in modo che il suo bordo dx sia allineato col bordo dx di WSHeader;
  • WSFooter è ancorato al bordo inferiore del più alto tra WSNavigator e WSContent (hanno un'altezza dinamica, dipendente dal contesto). La sua larghezza è fluida al 100%.


Attenzione la difficoltà consiste nel fatto nel codice html WSContent debba comparire PRIMA del codice di WSNavigator!

Tra i vari tentativi fallaci, ho il seguente, che talvolta addirittura manda in crash explorer 6 e soffre del fatto che la larghezza di WSNavigator sia fluida anziché fissa od elastica:

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Type" content="text/html; encoding=UTF-8">
		<title>Test Layout - Attenzione CRASH IE 6 in agguato!</title>
		<style type="text/css">
			html{
				margin: 0;
				padding: 0;
			}
			
			body {
				color: black;
				background: #dddddd;
				margin: 0;
				padding: 1em;
				line-height: 1.25; /* IE6 Peekaboo bug */
				font-size: smaller;
			}
			
			#WSContainer{
				background: white;
				border: 1px solid gray;
				padding: 1em;
				color: gray;
				min-width: 700px;
			}
			
			.WSHeader{
				padding: 1em;
				background: #ffaaaa;
				color: red;
			}
			
			.WSFooter{
				clear: both;
				padding: 1em;
				color: orange;
				background: #ffffaa;
			}
				
			.WSContent{
				float:right;
				width:78%;
				padding: 1%;
				margin: 0;
				background: #aaffaa;
				color: green;
			}
			
			.WSNavigator{
				color: blue;
				background: #aaaaff;
				float:left;
				height: 20em;
				width:18%;
				padding: 1%;
				margin: 0;
			}
			
		</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="../widthIE.css">
<![endif]-->
	</head>
	<body>
		<div id='WSContainer'>
			WSContainer
			<div class='WSHeader'>
				WSHeader
Attenzione CRASH IE 6 in agguato!
			</div>
			<div class='WSContent'>
				WSContent:
			</div>
			<div class='WSNavigator'>
				WSNavigator
				
			</div>
			<div class='WSFooter'>
				WSFooter
			</div>
		</div>
	</body>
</html>
in cui il file widthIE.css è quello descritto al tutorial:
http://css.html.it/articoli/leggi/24...due-colonne/5/

Il tutto ovviamente dovrebbe essere validato sia a livello di codice html che css (ed il codice sopra esposto è validato sia html che css), e dovrebbe funzionare sia con IE 6 che con Safari e Firefox.

Graditi consigli ;-)

grazie, MacApp