Ocupar el 100% del espacio DISPONIBLE ??

i34a23 · #1 (**permalink**) 13/02/2012, 14:29

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

C2am · #2 (**permalink**) 13/02/2012, 21:22

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

destinopolinesia · #3 (**permalink**) 14/02/2012, 01:15

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

i34a23 · #4 (**permalink**) 14/02/2012, 15:11

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;
}

i34a23 · #5 (**permalink**) 14/02/2012, 15:12

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 :(

emprear · #6 (**permalink**) 14/02/2012, 16:55

Cita:

Iniciado por i34a23

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<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
 
html, body, div {
margin: 0;
padding: 0;
border: none;
}
 
div#contenedor {
display: table;
width:100%;
}
 
div.d160 {
width: 160px;
background-color: red;
display: table-cell;
}
 
div.derecha{
display: table-cell;
background-color: lime;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="contenedor">
<div class="d160">
izquierda
</div>
<div class="derecha">
derecha
</div>
</div>
</body>
</html>

Saludos