Bueno.. .Finalmente y MUCHISIMAS gracias a posavasos, encontre un layout que pude modificar fácilmente para que se adapte a lo que necesitaba.
kemie
http://www.inknoise.com/experimental/layoutomatic.php no tiene layout con ancho fijo o no logre encontrarlo. Gracias
remo
http://glish.com/css/7.asp me fue imposible adaptar ese layout (no necesitaba headers ni footer) Gracias
Aca
http://css-discuss.incutio.com/?page=ThreeColumnLayouts encontre lo que necesitaba. Luego de reformar uno me quedo asi. [| |]
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
body {
padding:0;
margin:0;
color: #000000;
}
#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background:#F8E7EC;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;
}
#left {
position:relative;/*ie needs this to show float */
width:130px;
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;/*ie needs this to show float */
width:130px;
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
left:1px
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}
/* css stuff below is just for presentation and not needed for the demo */
#left span {
display:none;
}
#left a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#left a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
background:#fff;
}
@media all and (min-width: 0px){
#left a:hover span {
top:150px;
}
}
#footer span {
display:none;
}
#footer a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#footer a:hover span {
display:block;
position:absolute;
top:-95px;
width:150px;
z-index:20;
background:#fff;
left:50%;
}
html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<!-- <div id="clearheader"></div> -->
<div id="left">
Izquierda
</div>
<div id="right">
Derecha
</div>
<div id="centrecontent">
<!--centre content goes here -->
Centro
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<!--<div id="footer">Footer - | <a href="3colfixedtest_1.htm">Left column longest</a>
| <a href="3colfixedtest_2.htm">Centre column longest</a> | <a href="3colfixedtest_3.htm">Right
column longest</a> | <a href="3colfixedtest_pob.htm">Example Page<span><img src="images/screenexample.gif" alt="example page using the above techniques" width="150" height="85" /></span></a>
| - Footer
<p></p>
</div>-->
<!--<div id="header">Header - right column longest - footer at bottom of document.</div>-->
</body>
</html>