/*layout3colon*/


#principi 
{
font: bold 100% Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #000;
 width: auto;
 margin: 0.2em;
 }
.demo-allfloat {
font-size: 1em; 
font-family: georgia, serif; 
background: #E5DEE4; 
margin: 0 10px; 
border: 2px solid black; 
border-width: 0 1px;
}

* html .demo-allfloat {width: 100%; w\idth: auto;}
/*** This provides a hacked width of '100%' only to IE5.x/win ***/	

.demo-allfloat a:hover {background: black; color: yellow; text-decoration: none;}

#principi p {padding: 5px; margin: 0;} /*** If vertical margin is applied here, browsers may vary. ***/

#principi h2 {
margin: 0 0 0.5em; 
padding: 1px 0 3px 2em; 
position: relative;
border: 1px solid #9C8C85;
background: #EEE9E6;
 text-align: center;
 color: #000;
}
	/*** The vertical (top and bottom) padding is for Op6, to make it show the 
	link underline seperate from the header bottom border. A typical text variation. ***/ 

.demo-allfloat {position: relative; } /*** 'relative' is on this element to fix the IE6 bug. ***/

.float-wrapper {float: left; width: 55%; position: relative;   }
 /*** Must enclose two of the three cols. Must include center col. 'relative' is also here to fix the IE6 bug. ***/

.first-float {float: right; width: 49%; position: relative;border: 1px solid #342934;
}

.second-float {float: left; width: 49%; position: relative;border: 1px solid #342934; 
}

.third-float {float: right; width: 42%; position: relative; border: 1px solid #342934; 
}  
/*** 'relative' is here also to fix the IE6 bug. ***/

.first-float p {background: #EEE9E6;  
min-height: 100px;
height: auto !important;
height: 100px;
text-align: left;   }

.second-float p {background: #EEE9E6;  
min-height: 100px;
height: auto !important;
height: 100px;
 font-weight: bold;
 }

.third-float p {background: #EEE9E6; 
min-height: 100px;
height: auto !important;
height: 100px;
text-align: left; }

.clearfooter {clear: both;
position: relative;
 padding: 0; 
  margin: 0;
  font: 1px;
}
.float-wrapperi {float: left; width: 55%; position: relative;   }
 /*** Must enclose two of the three cols. Must include center col. 'relative' is also here to fix the IE6 bug. ***/

.first-floati {float: right; width: 49%; position: relative;border: 1px solid #342934;
}

.second-floati {float: left; width: 49%; position: relative;border: 1px solid #342934; 
}

.third-floati {float: right; width: 42%; position: relative; border: 1px solid #342934; 
}
.first-floati p {background: #EEE9E6;
min-height	: 30px; /* non è interpetata da Internet Explorer */
height		: auto !important; /* serve per Opera, Mozilla e gli altri browser per sovrascrivere la terza dichiarazione che vincolerebbe in ogni caso l'altezza del box (cosa non prevista da min-height). Internet Explorer non dà peso alla direttiva !important */
height		: 30px; /* è interpretata solo da Internet Explorer poiché per gli altri browser la seconda dichiarazione è più importante. In ogni caso Internet Explorer intepreterà height come se si trattasse di min-height */
}

.second-floati p {background: #EAE3E1; 
min-height: 30px;
height: auto !important;
height: 30px;
}

.third-floati p {background: #EAE3E1; 
min-height: 30px;
height: auto !important;
height: 30px;
}
/*** codice da inserire
<div class="float-wrapper">

     <div class="first-float">
    <p>One One One One One One One One One</p>
     </div>

     <div class="second-float">
    <p>Two Two Two Two Two Two</p>
     </div>

   </div>

 <div class="third-float">
<p>Three Three Three Three Three</p>
 </div>

<div class="clearfooter">&nbsp;</div> ***/