contenedores y sus contenidos

[pao01]

ya se me está haciendo costumbre

Tengo el siguiente problema, yo quiero realizar tres bloques que permitan ir guardando información como la imágen que detallo.


Ahí se ve, una columna a la izquierda con texto, una al centro con imágen y una a la derecha con un listado.
Hasta allí lo he hecho, pero al momento de visualizarse queda así:


Bueno, esa vista con las líneas verticales es de ie, en ff no ocurre esto (así que aquí estaría el primer tema.
Luego lo que no tengo claro es cómo hacer para que el texto quede como en la imágen primera.

Si me pueden dar una manito, agradecida.

html:

Código:

<div id="cont">
<div id="col_der">

<ul>
					<li><a href=”aresillo.html”>Diseño de Aresillo</a></li>
					<li><a href=”willyfc.html”>Diseño de Willyfc</a></li>
					<li><a href=”dopey-bbs.html”>Diseño de DoPeY-BBS</a></li>
					<li><a href=”alvlin.html”>Diseño de alvlin</a></li>
					<li><a href=”sanchy.html”>Diseño de sanchy</a></li>
					<li><a href=”triby.html”>Diseño de Triby</a></li>
					<li><a href=”javi_cassi.html”>Diseño de javi_cassi</a></li>
					<li><a href=”daes12.html”>Diseño de daes12</a></li>
					<li><a href=”raulmmmm.html”>Diseño de Raulmmmm</a></li>
					<li><a href=”buzu.html”>Diseño de Buzu</a></li>
					<li><a href=”http://www.devillasbuenas.es/fdw/enero/index.html”>Diseño de Kseso</a></li>
					<li><a href=”juaniquillo.html”>Diseño de juaniquillo</a></li>
                                 		                                      <li><a href=”pitufoweb.html”>Diseño de pitufoweb</a></li>
                                                                             </ul>
		
</div>
<div id="col_izq">
                                   <p>Soluciones Web es una empresa dinámica, que se destaca por ofrecer soluciones originales en el desarrollo de la web.  Nuestros servicios 
		se engloban en las áreas de Internet, programación, multimedia, diseño gráfico, traducciones y consultoría.  Asimismo disponemos de soluciones
		adaptadas a las necesidades particulares de cada cliente ofrenciendo un servicio integral.</p>

		<p>Nuestro estudio se compone de profesionales programadores capacitados en la últimas tecnologías y de diseñadores que van más allá de una pantalla
		de ordenador.</p>

		<p>La confianza de nuestros clientes y los resultados obtenidos desde hace 10 años de creciente trabajo, convirtieron a Soluciones Web en el líder en 
		servicios web de habla hispana.</p>

		<p>La ética de nuestros integrantes, la superación constante y la forma de trabajar, destacándonos siempre con una estética diferente a la media, hace que
		hoy usted nos elija.</p>
		
</div>
<div id="col_cen"><img src="http://www.forosdelweb.com/images/robotito.png" alt="mascota de la firma" /></div>
</div>

css:

Código:

/* estilo del cuerpo */

#cont {height: 515px;margin:0px;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #231f1f;}
#col_izq {float: left; width: 300px;background-color: #231f1f; font-size: 14px;}
#col_cen {background-color: #231f1f;}


.corte {clear: both;}

Me faltó agregar algo:
En este caso específico, necesitaría que las columnas no variaran su tamaño conforme el contenido.

[mariadelro]

tienes que darle un padding a la columna de la izquierda:
padding: 20px 0 0 15px;
No se te olvide que tienes que restar los 15px del padding izquierdo del ancho total del div col_izq. En este momento lo tienes de 300px, ponlo de 285px.

Suerte!

[elututo]

Yo no entendi bien cual/cuales son tus preguntas, pero veamos la ultima:

Creo que poniendo overflow:hidden solucionas el tema de que la columna no se adapte al ancho de sus elementos:


#col_der, #col_izq, #col_cen {height: 100%;overflow:hidden}


Me faltó aclarar que lo que hace este comando es ocultar todo lo que sobresale del alto y ancho de la columna, por lo tanto si tenes una imagen mas ancha que la columna se va a ver cortada.

[pao01]

elututo, mis preguntas puntuales son:
cómo hacer para que en ie y ff se vea igual, sin esas líneas que dividen cada caja.
cómo hacer que el texto quede centrado (no hablo del efecto centrado), sino que estén al centro de la caja que lo contiene.
y por último hice la aclaración de que en este caso particular no es necesario que cada caja se adapte, sino que se mantenga en un tamaño fijo, ya que la idea no es incorporar nuevo material.
Gracias por tu respuesta, ya lo pruebo y veo que resulta.

[willyfc]

hola pao, mira esto es más un truco que una solución en código, si lo que quieres es que se pierdan las líneas blancas que aparecen en explorer, coloca al contenedor el mismo color de fondo que tienen las cajas según el ejemplo que del cual pusiste el código en tu post

Código:

#cont {height: 515px;margin:0px;background-color: #231f1f}

bueno en fin modifique un poco el código de esta manera:

Código:

body{color:#FFFFFF}
#cont {height: 515px;margin:0px;background-color: #231f1f}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #231f1f;}
.col_der{ margin:20px 0 0 0;}
#col_izq {float: left; width: 300px;background-color: #231f1f; font-size: 14px;}
.col_izq {padding:20px; text-align:justify}
#col_cen {background-color: #231f1f;}
.col_cen{ padding:20px 10px 0 10px; text-align:center;}
.corte {clear: both;}

Código HTML:

<div id="cont">
<div id="col_der">
	<div class="col_der">
	<ul>
		<li><a href=”aresillo.html”>Diseño de Aresillo</a></li>
		<li><a href=”willyfc.html”>Diseño de Willyfc</a></li>
		<li><a href=”dopey-bbs.html”>Diseño de DoPeY-BBS</a></li>
		<li><a href=”alvlin.html”>Diseño de alvlin</a></li>
		<li><a href=”sanchy.html”>Diseño de sanchy</a></li>
		<li><a href=”triby.html”>Diseño de Triby</a></li>
		<li><a href=”javi_cassi.html”>Diseño de javi_cassi</a></li>
		<li><a href=”daes12.html”>Diseño de daes12</a></li>
		<li><a href=”raulmmmm.html”>Diseño de Raulmmmm</a></li>
		<li><a href=”buzu.html”>Diseño de Buzu</a></li>
		<li><a href=”http://www.devillasbuenas.es/fdw/enero/index.html”>Diseño de Kseso</a></li>
		<li><a href=”juaniquillo.html”>Diseño de juaniquillo</a></li>
        <li><a href=”pitufoweb.html”>Diseño de pitufoweb</a></li>
    </ul>		
	</div>
</div>
<div id="col_izq">
	<div class="col_izq">
     <p>Soluciones Web es una empresa dinámica, que se destaca por ofrecer soluciones originales en el desarrollo de la web.  Nuestros servicios 
		se engloban en las áreas de Internet, programación, multimedia, diseño gráfico, traducciones y consultoría.  Asimismo disponemos de soluciones
		adaptadas a las necesidades particulares de cada cliente ofrenciendo un servicio integral.</p>

		<p>Nuestro estudio se compone de profesionales programadores capacitados en la últimas tecnologías y de diseñadores que van más allá de una pantalla
		de ordenador.</p>

		<p>La confianza de nuestros clientes y los resultados obtenidos desde hace 10 años de creciente trabajo, convirtieron a Soluciones Web en el líder en 
		servicios web de habla hispana.</p>

		<p>La ética de nuestros integrantes, la superación constante y la forma de trabajar, destacándonos siempre con una estética diferente a la media, hace que
		hoy usted nos elija.</p>
		</div>
</div>
<div id="col_cen"><div class="col_cen"><img src="http://www.forosdelweb.com/images/robotito.png" alt="mascota de la firma" width="340" height="378" /></div></div>
</div> 

espero te sirva avisas como te va

Bye

[pao01]

Willyfc, Super pero Super Gracias!!!
he resuelto dos conflictos: el de las líneas verticales que ya han desaparecido, y el del formato del texto, ahora no visualizo la info de la columna derecha (pero aquí deja que ya me arreglo pensando un poco, que preciso razonarlo).
Sigo con esto y si surge algo o no puedo con ello vuelvo a avisar.

[willyfc]

me alegro que te haya servido, si no puedes con algo no dudes en pasarte por aquí

Bye