Foros del Web » Creando para Internet » CSS »

Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Estas en el tema de Div izquierdo con ancho fijo y div derecho con ancho en porcentaje en el foro de CSS en Foros del Web. Hola, alguien sabe como poner un div flotante a la izquierda con ancho fijo y otro flotante a la derecha de este con porcentaje que ...
  #1 (permalink)  
Antiguo 09/12/2009, 10:33
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Pregunta Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Hola, alguien sabe como poner un div flotante a la izquierda con ancho fijo y otro flotante a la derecha de este con porcentaje que se ajuste a lo que queda de la página, me imagino que es con porcentaje. Gracias de antemano.
  #2 (permalink)  
Antiguo 09/12/2009, 10:49
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Y porque no simplemente le restas al total la medida de la izq y esto te da la medida de la derecha?
ejm

#container{
width: 800px;
}

#columna_izq{
float: left;
width: 300px;
}

#columna_izq{
float: left;
width: 500px;
}
  #3 (permalink)  
Antiguo 09/12/2009, 10:53
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

gracias, lo que pasa es que el container tiene un width de 100%, por lo tanto no se las medidas...
  #4 (permalink)  
Antiguo 09/12/2009, 11:12
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Seria algo asi:

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

#container{
width: 100%;
height:100%;
background-color:#FF000A;
}

#columna_izq{
float: left;
width: 300px;
background-color: #0051DF;
height: inherit;
}

#columna_der{
background-color: #0DEF00;
widht:100%;
height: inherit;
}
Código HTML:
<div id="container">
<div id="columna_izq"></div>
<div id="columna_der"></div>
</div> 
Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 09/12/2009, 11:46
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

justo lo que necesitaba gracias...
  #6 (permalink)  
Antiguo 09/12/2009, 12:03
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Hola, les dejo una alternativa:

Código:
<div id="todo">
<div id="izq"></div>
<div id="der"></div>
</div>
Código:
* {
	margin: 0;
	padding: 0;
}
body {
	min-width: 780px;
	max-width: 1260px;
	margin:auto;
}
#todo{
	margin:10px;
}
#der {
	padding-left: 200px;
}
#izq {
	width: 150px;
	float: left;
}
  #7 (permalink)  
Antiguo 09/12/2009, 15:00
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

y si quisiera hacerlo al revés? o sea tener por decir algo 3 divs con height definido de 10 pixeles cada uno, uno debajo del otro y colocar un cuarto div en el que el height llegue hasta abajo según cada monitor? Gracias
  #8 (permalink)  
Antiguo 09/12/2009, 16:24
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Seria algo asi

Código HTML:
* {
margin:0;
padding:0;
}

#uno, #dos, #tres {
width:100%;
height:10px;
}

#cuatro {
width:100%;
height:100%;
background-color:#FF0033;
}

#uno, #tres {
background-color:#000;
}

#dos {
background-color:#FF0033;
}
Código HTML:
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div id="cuatro"></div> 
Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #9 (permalink)  
Antiguo 10/12/2009, 07:10
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Hola, lo he probado y el cuarto div no llega hasta abajo, sabes como hacer para que el cuarto div llegue hasta abajo?
  #10 (permalink)  
Antiguo 10/12/2009, 08:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

A mi si me llega...
__________________
Revisa las FAQ's antes de disparar.
  #11 (permalink)  
Antiguo 10/12/2009, 08:45
 
Fecha de Ingreso: septiembre-2009
Mensajes: 13
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

lo probé en Firefox 3.5, IE 8, Chrome y el cuarto div ni se mira
  #12 (permalink)  
Antiguo 10/12/2009, 09:02
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Lo he porbado en firefox 3.5, Crhome y Opera 10 y se ve hasta el final



Si persistes el problema crea un contenedor con ancho y alto 100% que contenga a los demas.
__________________
Revisa las FAQ's antes de disparar.
  #13 (permalink)  
Antiguo 10/12/2009, 11:11
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
De acuerdo Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Hola, Recueda agregarle esto al comienzo

Código:
html, body{
  widht: 100%;
  height: 100%;
}
  #14 (permalink)  
Antiguo 10/12/2009, 11:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Cita:
Iniciado por AhmedRugama Ver Mensaje
Hola, Recueda agregarle esto al comienzo

Código:
html, body{
  widht: 100%;
  height: 100%;
}
Eso no es necesario.
__________________
Revisa las FAQ's antes de disparar.
  #15 (permalink)  
Antiguo 10/12/2009, 11:49
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Pues si esta dentro de un div con medidas definidas entonces no es necesario

Pero si quieres usar un div en terminos porcentuales en relacion a la pagina tienes que definir en 100% el ancho y altura del hmtl y body ya que por default estan en auto.
  #16 (permalink)  
Antiguo 10/12/2009, 14:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Cita:
Iniciado por AhmedRugama Ver Mensaje
Pero si quieres usar un div en terminos porcentuales en relacion a la pagina tienes que definir en 100% el ancho y altura del hmtl y body ya que por default estan en auto.
El auto implica que heredan las propiedades del elemento padre, pero htmlo no lo tiene, ni body¡¡¡ POr eso, el auto para ellos es medidas 100% y no es por tanto necesario indicarlo.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #17 (permalink)  
Antiguo 10/12/2009, 14:57
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
De acuerdo Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Hola impostor ps fijate que no me dio pereza probarlo porq todos nos equivocamos de ves en cuando y lo de html, body{ height:100%;} si es necesario ponerselo si lo que queremos es que el div "contenido" con 100% de altura cubra toda la pagina.

Sino solo cubrira lo que el contenido (el texto y demas) lo obligue a expandirse

Ponerle 100% de ancho al body no es necesario porq esta 100% como default tal como dijiste.

Y al User ocb11 lo que nesecitas es poner el fondo de la pagina del color que quieres que salga el div de abajo, y a los de arriba ponerle fondo blanco, asi te dara la impresion que el de abajo llega hasta donde termina la pagina.

Saludos a ambos
  #18 (permalink)  
Antiguo 11/12/2009, 04:05
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Sigo sin estar de acuerdo contigo, por defecto, el body tiene medidas 100%x100% y para muestra:

Código HTML:
<html>

<head>

<style type="text/css">

body {
background-color:#FF0033;
}

</style>

</head>

<body>

</body>

</html> 
Se ve que cubre la pantalla completa, cosa que no seria asi si no estuviese al 100%. Perop bueno, tampoco quiero alargar este tema demasiado, cuando ambos hemos dejado claro nuestro punto de vista. Si algún tercero quiere dar su oinión seria genial.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #19 (permalink)  
Antiguo 11/12/2009, 08:31
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div izquierdo con ancho fijo y div derecho con ancho en porcentaje

Bueno tienes razon en lo de alargar el tema pero mira, que en nuestros ejemplos no nos estamos contradiciendo, yo se que si le das color al body cubre toda la pagina.

pero si quieres que un elemento dentro del body (<div>) cubra toda la pagina tienes que hacer lo que te dije, prueva y veras.

Ya hicimos un tema largo de algo tan basico jajaja

Saludos
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 08:00.