3 Columnas Flotantes PX, %, PX

[syslock64]

Buenos dias a todos =) miren tengo un DIV contenedor podriamos llamarlo DIV.contenedor, luego dentro de este DIV voy a colocar 3 DIV flotantes osea pegados como 3 columnas horizontales pegadas, =) okis hasta aki todo bien, el problema es cuando yo quiero poner estas medidas 1ero width=250px, 2do width=%(todo lo k pueda ocupar), 3ero width=250px

algo asi:

Código:

<div style="display:block;width:100%">
	<div style="display:block;float:left;width:230px"></div>
	<div style="display:block;float:left">
	COntenido resizable, dependiendo del ancho de pantalla 
	</div>
	<div style="display:block;float:right;width:230px"></div><div style="clear:both"></div>
</div>

Pues como veran si ponemos mas contenido en el div del medio... el DIV k esta al lado derecho... se va superponiendo el 2do encima del 3ero. o lo va bajando...

Como puedo hacer para k respete las columnas de los 2 lados y el medio sea PORCENTUAL?

espero haberme explicado bien amigos, gracias de ante mano =)

[syslock64]

Bueno me auto respondo... la solucion que encontre es utilizando tablas u.u!! bueno se k esta fuera de ser DIVS pero por ahora lo trabajare asi...

Código HTML:

<table style="width:100%">
<tr>
<td style="width:250px">xD</td>
<td>asdasd</td>
<td style="width:250px">asdsa</td>
</tr>
</table>
 

[andresdzphp]

Es que si te pasas del total del ancho se te bajan los div, tienes que manejar el ancho exacto y es más fácil con sólo porcentajes yo creo...

Código CSS:

#izq,#der,#cen {
        float: left;
    }
    
    #contenedor {
        width: 100%;
    }
    
    #izq {
        width: 20%;
    }
    
    #cen {
        width: 60%;
    }
    
    #der {
        width: 20%;
    }
 

Código HTML:

<div id="contenedor">
        
        <div id="izq">izq</div>
        <div id="cen">cen</div>
        <div id="der">der</div>
        
    </div>
 

[C2am]

Una forma de controlar eso es pensar en como el navegador armará la página.
Luego piensas así:
1º que se dibuje la columna de ancho fijo : izquierda o derecha
2º que se dibuje la otra columna de ancho fijo: derecha o izquierda.
Entonces ahora, que ya están ubicadas las dos columnas de ancho fijo viene el tercer paso:
3º que se dibuje la columna de ancho variable igual al ancho que dejen disponibles las columnas fijas.

Código HTML:

<!-- Nota: como son div (elementos de bloque) no hace falta poner display:block -->
<div style="width:100%; overflow:hidden (o auto)"><!-- con overflow evitas poner el div vacio que limpia los float -->
        
        <div style="float:left; width:230px; background-color:#C06">
         Caja con ancho fijo a la izquierda
        </div>
        
        <div style="float:right;width:230px; background-color:#0CC">
        Caja con ancho fijo a la derecha
        </div>
        
        <div style="background-color:#060">
        Como ya se han posicionado las cajas fijas, esta caja quedara ubicada en el espacio libre que dejen las anteriores. 
 
Los background son solamente para ver la disposición.
        </div>
        
        
        
       <!--  <div style="clear:both"></div>  -- ya no hace falta gracias al overflow en la caja padre -->
</div>
 

Aclaración: como verás la ultima caja no es flotante, y debes considerar el tema de las alturas de las cajas. Prueba dandole alturas diferentes y veras a que me refiero. Para controlar mas o menos ese tema usa min-heigth y max-heigth.

[syslock64]

Oh! Genial si tienes razon jejje Muchisimas gracias C2am es lo k estuve buscando... ahora solo me falta k los divs a ambos lados ocupen el 100% de alto =) voy a ir viendo y leyendo. Muchas gracias de nuevo. =)

[syslock64]

Amigo encontre la solucion es un pequeño truco pero es tan necesario que sin el los DIVS no podrian tomar el 100% de la altura de la pantalla o dispositivo =)

CODIGO CSS:

Código HTML:

<style type='text/css' media='all'>
*{padding:0;margin:0}
html, body { height: 100%; }
</style>
 

CODIGO XHTML

Código HTML:

<div style="width:100%;height:100% "><!-- con overflow evitas poner el div vacio que limpia los float -->
        
        <div style="float:left; width:230px; background-color:#C06;height:100%">
        Caja con ancho fijo a la izquierda
         
        </div>
        
        <div style="float:right;width:230px; background-color:#0CC;height:100%">
        Caja con ancho fijo a la derecha
        </div>
        
        <div style="background-color:#060">
        <div >
        Como ya se han posicionado las cajas fijas, esta caja quedara ubicada en el espacio libre que dejen las anteriores. 
 
Los background son solamente para ver la disposición.
        </div>
        </div>
        
        
       <!--  <div style="clear:both"></div>  -- ya no hace falta gracias al overflow en la caja padre -->
</div>
 

espero pueda servirle a muchos que quiza no sabian el trukito jeje =) muchas gracias a todos =). Caso cerrado!