Dos div's en misma linea

[salbatore]

Hola, foreros!

Espero que me podais ayudar hacer esta estructura, jeje. Mirar tengo un div con una medida relativa, es decir, que puede variar de 700px a 800px, por medio de javascript. Lo que busco es que el contenido de este div este compuesto por dos div. De esta forma:

-El primero de anchura: 100%.
-El segundo de 200px, pegado al primero.

Código HTML:

<div id='contenedor'>
	<div id='div_de_100%'>
	</div>
	<div id='div_de_200px'>
	<div>
</div> 

Pero lo importante es que esten en la misma linea... es decir, que por muy grande que sea el 'contenedor' el div 'div_de_100%' aumente de anchura pues tiene 100%, y el de 200px se mantenga pegado a su derecha siempre.

¿Como lo hago?... realmente creo que es imposible... jeje... ¿Que crees?

[kseso?]

A ver qué tal así:
en el css:

#estrecho {
float: rigth;
width:200px;
display: inline;
/*otras propiedades*/
}
#ancho {
display: inline;
/*resto de propiedades*/
}

En el html:

<div id="contenedor">
<div id="estrecho">
bla bla bla...
</div>
<div id="ancho">
bla bla bla ...
</div>
</div>

[salbatore]

Hola, Kseso?

He probado el codigo que me das en IE, Firefox y Safari... y me muestra los div's con las dimensiones mas pequeñas posibles... es decir, que el div 'estrecho' no tiene 200px... y el div 'ancho' no tiene 100%. Si es que creo que es mucho mas dificil de lo que parece a simple vista... jeje.

He probado un monton de convinaciones... y nada de nada... jeje.

¿Se os ocurre alguna solucion?

[kseso?]

Hola Salbatore.
Cuando las cosas se hacen con más voluntad que rigor y paciencia se suelen cometer errores absurdos.
El siguiente código está probado en FF. Le he añadido unos colores de fondo y algún borde para que veas cada uno de los div´s.
Sólo tienes que llenar de contenido el de la izquierda para que crezca hasta ocupar toda la ventana menos los 200px del extrecho.
En el css

#contenedor {
width:100%;
}
#estrecho {
border:1px solid #000000;
float:right;
padding:2px;
width:200px;
text-align:justify;
background-color:#202020;
/*otras propiedades*/
}
#ancho {
margin-right:220px;
text-align:justify;
background-color:#909090;
/*resto de propiedades*/
}

En el html

<div id="contenedor">
<div id="estrecho">
bla bla bla...
</div>
<div id="ancho">
bla bla bla ... y mucho bla bla bla para que crezca y llene el espacio hasta el div estrecho
</div>
</div>

Pero seguro que con estas clases más adelante van a surjirte otras cosillas.
Ya se verán entonces.
Un saludo

[salbatore]

Hola, Kseso?

Muchas gracias por la ayuda, jeje. Era lo que buscaba, jeje. Realmente... los css me cuestan un monton... jeje. Nunca habia hecho eso con los margin, jeje... hacer un espacio con ellos para meter otro div, jeje.

Bueno... gracias!!!!!!!!!!.

[kseso?]

10-4 Salbatore.
Hay muchas páginas de "layouts" o plantillas. En este foro tienes este tema dedicado a páginas interesantes de css.
Mikmoro tiene publicados también algunos diseños aquí
Y en este enlace tienes un diseño de principal+sidebar derecho con cabecera y pie en diseño "líquido", esto es adaptado a la resolución de la ventana.

Espero te sirva alguno.
Un saludo

[salbatore]

Hola, kseso?...

Muchas gracias por las direcciones!... que sencillo de ver los modelos... jeje..

Me salvaran en mas de una ocasion.. jeje..

Gracias.