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

[ocb11]

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.

[AhmedRugama]

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

[ocb11]

gracias, lo que pasa es que el container tiene un width de 100%, por lo tanto no se las medidas...

[Impostor]

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¡¡

[ocb11]

justo lo que necesitaba gracias...

[AhmedRugama]

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

[ocb11]

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

[Impostor]

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¡¡

[ocb11]

Hola, lo he probado y el cuarto div no llega hasta abajo, sabes como hacer para que el cuarto div llegue hasta abajo?

[Impostor]

A mi si me llega...

[ocb11]

lo probé en Firefox 3.5, IE 8, Chrome y el cuarto div ni se mira

[Impostor]

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.

[AhmedRugama]

Hola, Recueda agregarle esto al comienzo

Código:

html, body{
  widht: 100%;
  height: 100%;
}

[Impostor]

Iniciado por AhmedRugama

Hola, Recueda agregarle esto al comienzo

Código:

html, body{
  widht: 100%;
  height: 100%;
}

Eso no es necesario.

[AhmedRugama]

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.

[Impostor]

Iniciado por AhmedRugama

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¡¡

[AhmedRugama]

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

[Impostor]

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¡¡

[AhmedRugama]

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