columna con 20% de margen izquierdo y con caja de tamaño fijo al lado

ASYNTETYCO · #1 (**permalink**) 05/05/2008, 08:19

Bueno pues eso, tengo un encabezado y quiero poner una imagen de 100 x 400 pero con margen de 20% del lado izquierdo. Y seguido un cuadro de texto de 600 x 400. Pero cuando lo pongo la caja se va hacia abajo, aunque los pongo float left.

Y ademas quiero poner un pie de texto pero ese texto tiene que ir justo abajito de la caja, y por eso pienso en poner un cuado con ancho de 100 como la imagen y con margen de 20% izquierdo como la imagen para poner al lado un div de 600 de ancho para que este justo abajo de la caja d texto.

¿Alguien puede ayudarme, esto del css es muy complicado para hacer cosas muy sencillas?

nedrek · #2 (**permalink**) 06/05/2008, 03:40

En principio, no uses ese porcentaje, pues es relativo a la anchura total de la página, y sin ver la maquetacion completa es muy dificil indicarte...

Pega los códigos si tienes posibilidad, o dinos la web donde está colgada, para echar un vistazo.

No es tan complicado cuando le coges el tranquillo..

Un saludo.

ASYNTETYCO · #3 (**permalink**) 06/05/2008, 18:36

Gracias Nedrek, ya ncontre la solucion, puse un contenedor y dentro puse la primera caja que te mencione y luego puse la otra caja, este es mi codigo para que veas de que te hablaba:

<body>
<div id="cabezera" style="clear: both"><img src="OXIGENO-Encabezado.gif" /></div>
<div id="separador" style="clear: both; height: 5px"> </div>
<div id="contenedor" style="width: 702px; height: 400px; margin-left: 20%">
<div id="bienvenidos" style="height:400px; width:100px; float: left"><img src="Bienvenido.gif" width="100" height="400"/></div>
<div id="cajadetexto" style="height:380px; width: 580px; background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000; overflow: auto; padding: 10px;"> Texto del div...
</div>
<div id="contenedorpie" style="margin-left: 20%; clear: both; width: auto; height: 14px">
<div id="espaciador" style="width: 100px; height: 14px; float: left"></div>
<div id="menu" style="width: 600px; height: 14px">
<div align="right" class="menu"><a href="index.html">Inicio</a> | <a href="oxigeno.html">¿Oxigeno?</a> | <a href="publicidad.html">Publicidad</a> | <a href="diseno.html">Diseño</a> | <a href="conceptualizacion.html">Conceptualización</a> | <a href="contactar.html">Contactar</a></div>
</div>
</div>
</div>
</body>
</html>