Foros del Web » Creando para Internet » CSS »

Ocupar el 100% del espacio DISPONIBLE ??

Estas en el tema de Ocupar el 100% del espacio DISPONIBLE ?? en el foro de CSS en Foros del Web. Tengo un div que ocupa 160px en la parte superior de la página este esta posicionado con float:left; luego necesito que al costado de este ...
  #1 (permalink)  
Antiguo 13/02/2012, 14:29
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 12 años, 2 meses
Puntos: 1
Ocupar el 100% del espacio DISPONIBLE ??

Tengo un div que ocupa 160px en la parte superior de la página este esta posicionado con float:left;

luego necesito que al costado de este aparesca el otro div y que ocupe todo el ancho que quedo disponible.

si le pongo width:100% ignora al div que tiene al costado y se posiciona abajo tomando todo el ancho de la ventana.


alguna solucion ?

saludos
  #2 (permalink)  
Antiguo 13/02/2012, 21:22
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 9 meses
Puntos: 306
Respuesta: Ocupar el 100% del espacio DISPONIBLE ??

Hola
Muestra el código que estas usando.
No deberías tener problema, pero sin código es difícil ver donde está el error.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 14/02/2012, 01:15
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 8 años, 5 meses
Puntos: 6
Respuesta: Ocupar el 100% del espacio DISPONIBLE ??

y no puedes pasar los 160px a porcentaje y luego le das al resto al div pegado. por ejemplo sobre 1280 le darias 12.5 por ciento y al que esta pegado 87.5 por ciento venga nos dices
  #4 (permalink)  
Antiguo 14/02/2012, 15:11
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Ocupar el 100% del espacio DISPONIBLE ??

El código es simple... es un div seguido de otro

Código:
<html>
<head>
<link  type="text/css" rel="stylesheet" href="css/portada.css"></link>
<link  type="text/css" rel="stylesheet" href="css/nuevo_usuario.css"></link>
</head>
<body align="center">
<div id="master" width="100%" align="center">
<div id="ppal_cont">


<div id="Logo" > <p> LOGO </p> </div>
<div id="cabecera" > <p>  CABECERA </p> </div>
<div id="fin_cabecera" ></div>

<div id="base_logo" ></div>
<div id="fin_base_logo" ></div>

<div id="esquina" ></div>
<div id="base_cabecera" ></div>
<div id="fin_esquina" ></div>


<div id="menu" > <p> MENU<br>MENU<br>MENU<br>MENU<br>MENU<br>MENU<br>MENU<br>MENU<br>MENU<br>  </p> </div>
<div id="borde_menu" ></div>
<div id="contenido" align="left" >


<object type="text/html" data="../nuevo_usuario.php" width="100%" height="100%"></object>

</div>
<div id="fin_borde_menu" ></div>




</div>
</div>
</body>
</html>
y luego el css

Código:
* {
border: 0px;
padding: 0px;
margin: 0px;
}

body{
background-color:#dedede;
width:100%;
}

#master{
}

#ppal_cont{
background-color:#dedede;
width:1200px;
}

#Logo{
float:left;
background-color:#dedede;
width:160px;
height:100px;
}

#base_logo
{
float:left;
background-color:#dedede;
width:160px;
height:17px;
}

#esquina
{
float:left;
background-image: url('../img/edge.png');
width:16px;
height:17;
}

#fin_esquina
{
float:left;
background-image: url('../img/final_edge.png');
width:16px;
height:17;
}


#cabecera{
float:left;
background-color:#dedede;
width:1000px;
height:100px;
}

#fin_cabecera{
float:left;
background-color:#dedede;
width:16px;
height:100px;
}

#base_cabecera
{
float:left;
background-image: url('../img/base_header.png');
width:984px;
height:17;
}

#menu{
float:left;
background-color:#dedede;
width:160px;
height:100px;
}

#borde_menu
{
float:left;
background-image: url('../img/borde_menu.png');
width:16px;
height:100%;
}

#fin_borde_menu
{
float:left;
background-image: url('../img/final_borde_menu.png');
width:16px;
height:100%;
}

#contenido{
float:left;
width:984px;
height:100%;
background-color:#f2f2f2;
}
  #5 (permalink)  
Antiguo 14/02/2012, 15:12
 
Fecha de Ingreso: agosto-2007
Ubicación: Santiago de Chile
Mensajes: 67
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Ocupar el 100% del espacio DISPONIBLE ??

El problema de usar el ancho como % es que cuando la ventana se minimiza... todo se redimensiona y causa que el sitio se descuadre entero :(
  #6 (permalink)  
Antiguo 14/02/2012, 16:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 4 meses
Puntos: 1567
Respuesta: Ocupar el 100% del espacio DISPONIBLE ??

Cita:
Iniciado por i34a23 Ver Mensaje
Tengo un div que ocupa 160px en la parte superior de la página este esta posicionado con float:left;

luego necesito que al costado de este aparesca el otro div y que ocupe todo el ancho que quedo disponible.

si le pongo width:100% ignora al div que tiene al costado y se posiciona abajo tomando todo el ancho de la ventana.


alguna solucion ?

saludos
Asi porejemplo
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10.  
  11. html, body, div {
  12. margin: 0;
  13. padding: 0;
  14. border: none;
  15. }
  16.  
  17. div#contenedor {
  18. display: table;
  19. width:100%;
  20. }
  21.  
  22. div.d160 {
  23. width: 160px;
  24. background-color: red;
  25. display: table-cell;
  26. }
  27.  
  28. div.derecha{
  29. display: table-cell;
  30. background-color: lime;
  31. }
  32.  
  33. /*]]>*/
  34. </head>
  35. <div id="contenedor">
  36. <div class="d160">
  37. izquierda
  38. </div>
  39. <div class="derecha">
  40. derecha
  41. </div>
  42. </div>
  43. </body>
  44. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: disponible, espacio, ocupar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:13.