Crear más div (contenedor) por debajo de otros

[zoloquoki]

Hola, antes que nada, muy buen sitio para aprender cosas nuevas de creación web's!

Bueno, mi pregunta es: Como puedo crear más contenedores en los lados, tanto en la derecha como en la izquierda, y justamente por debajo, dejando espacio entre ambos contenedores.

He intentado crearlos, pero siempre me deja al lado del otro cubriendo al cuerpo central.

Espero que me entendais a lo que me refiero exactamente.

muchas gracias!

[cristian_cena]

Hola zoloquoki, que bueno te guste fdw, uno mas en el foro!

crea los divs que quieras y luego dale sus correspondientes id. Luego los llamas en <style> y les aplicas las propiedades float y clear. También te servirá aprender a trabajar con la propiedad position. http://www.librosweb.es/css/

En head:
<style type="text/css">
div {width:100px; float:left;}
#a {background-color:red;}
#b {background-color:yellow;}
#c {background-color:green;}
#debajo {clear:both; background-color:purple; width:300px;}
</style>

En body:
<div id="a">asd ada a das das dasd sas d asd as d</div>
<div id="b"> as da sd as da sd as das s da sd</div>
<div id="c"> as da d asd a sd as da sd as d</div>
<div id="debajo">asdas a da as d a sd as d asda sd </div>

Es solo un modo de hacerlo, espero te sirva.
Saludos!

[zoloquoki]

gracias por la respuesta. El enlace que me has pasado, ya lo habia mirado e intentado, pero no me sale.

Principalmente son 3 columnas (no son frames). En la derecha quiero poner 2 contenedores y en la izquierda 3. Y en la central, esta otro contenedor más grande y amplio para ver la información facilmente.

Cada vez que inserto un div nuevo, siempre me deja al lado del contenedor derecho, y si pongo "clear:both", el contenedor de la izquierda se pone por debajo del contenedor derecho, o sea que no consigo que se fijen los divs en su sitio.

Me gustaría poner mi codigo html y hoja css para que podais echar un vistazo, al parecer no me permiten por ser nuevo.

gracias!!

[cristian_cena]

Puedes postear el codigo o bien una URL con espacios (misitio . com . ar) hasta que llegues a los 30 mensajes.

- si aplicas clear:both, esta propiedad no permitira que se flote nada (ni por derecha ni por izquierda) alrededor del elemento poseedor de esa propiedad.

Nunca digas no me sale, solo intentalo. Empieza aprendiendo a usar float y clear. Toma, con esto aprendi yo http://www.librosweb.es/css/capitulo...nto_float.html. Si no lo lees es imposible que sigas porque son propiedades fundamentales.
Si lo lees y se te plantea una duda aquí estaremos para ayudarte

Suerte con eso!

[zoloquoki]

gracias por tu ayuda, y no quiero que me consideres como que no lo intento y que quiero soluciones. Me he pasado todo el día solo para ver si consigo fijar los contenedores donde yo quiero. El enlace que me has pasado, lo he leido por lo menos unas 20 veces, pero el problema es que yo quiero fijar un contenedor a la derecha y justo debajo del superior.

He subido mi web a un sitio para que puedas mirarlo y a ver si está bien.

He coloreado el "contendor 3" en AZUL, y a ver si hay algún fallo.

El "contenedor 1" es el de la izquierda, y el "2" el de la derecha arriba.

(3w.miweb. zxq. net)

gracias!!

[cristian_cena]

zoloquiki, valoro tu esfuerzo, mas no puedo ver tu sitio. Dice: "esta cuenta necesita activacion".
Avisame cuando lo hagas funcionar y vemos el problema.

Saludos!

[zoloquoki]

prueba ahora...

[zoloquoki]

y recuerda que "3w" es "www". ;)

saludos!

[cristian_cena]

zoloquoki: incluye lo siguiente en tu codigo de acuerdo a si quieres que tu div "azul" se coloque debajo del div principal (el que ocupa el centro) o bien se coloque debajo del superior (del lado derecho)

abajo del principal:

#invisible {
clear:both;
}
.thrColLiqHdr #contenedor3 {
float:left;
margin-left:146px;
}

y en body agregas:
<div id="invisible"></div>

antes de:
<div class="thrColLiqHdr" id="contenedor3" align="right">

abajo del superior: dale los siguientes valores a #contenedor3:

#contenedor3 {
float:right;
margin-right:2px;
margin-top:-218px;
}

No es el mejor modo de hacerlo puesto que tienes que ir definiendo las propiedades empezando por las etiquetas "padre" y finalizando con las "hijas" y a ti te faltan las etiquetas "padre"

es decir: si planteas tres columnas entonces crea <div id="col1">, <div id="col2"> y <div id="col3"> y luego a col3 le anidas los dos divs hijos. De ese modo me parece que podras llevar mejor el control de tu maqueta.

Saludos!

[zoloquoki]

Precisamente por eso no se podía fijar el contenedor por debajo del contenedor derecho. He probado lo que me has dicho, y la verdad no queda nada bien, y debería de hacer otra nueva desde el principio. Crear "padre" y luego "hij@s", pero quisiera hacer:

Me gustaría hacer un div donde queda dentro demás div's para dar una interfaz más agradable, es decir, el div externo solo para darle el borde como contorno, y dentro varios divs, primero el encabezado, luego las 3 columnas y por último el pie. Pregunta: No afectará al crear dentro del div externo el "padre" e "hij@" sabiendo que las 3 columnas va a estar por debajo del "encabezado". Me explico?

Tal como está la web que miraste, quiero dejarla así pero mejorada.

mil gracias!!

[zoloquoki]

ouuii!!! por fiiinnnn!!! Ya lo he conseguido!!!!

He tenido que crear otra plantilla con CSS propio del programa CS3. Es que la plantilla de antes era una de 3 columnas flotantes con encabezado y pie, y creo que era esto el que me daba problemas. La que me ha funcionado es la de 3 columnas fijas con encabezado y pie (a partir de ahí he modificado la anchura del container, en vez de 780px, he puesto 95%.

Y luego, copias el contenedor y lo pegas, y añades el "clear:left" o "clear:right" según donde quieras ponerlo. Al mismo tiempo, el float tiene que ser el mismo que el clear. y rulando a la perfección!!!

ahora toca trabajar con javascript para crear menús desplegables... (a veeer q tal...)

Cristian_cena, muchas gracias de verdad!!

salu2!!!

[cristian_cena]

Enhorabuena! no hay de que agradecer, me alegro que lo hayas solucionado, y me alegro también en que hayas dado un gran paso respecto a maquetacion, anidando hijos y dando estilos. Eso si .. el codigo que te pasé funcionaba para tu maqueta anterior "sin padres" ahora probablemente ya no te sirva, pero bien puedes ir aprendiendo a usar la propiedad position que te ahorrará mucho tiempo y esfuerzo y sobre todo te dará fluidez en el dominio de css.

Saludos!

[jomaruro]

Hola:

Iniciado por zoloquoki

ahora toca trabajar con javascript para crear menús desplegables... (a veeer q tal...)

Y porqué no hacerlo sólo con CSS, aquí tienes varios ejemplos creados por Mikmoro.

Saludos.

[zoloquoki]

el enlace que os pasé está actualizada, y si podeis, echadle un vistazo. Acepto cualquier propuesta a mejorar.

jomaruro, gracias por los ejemplos.

Hay alguna mejora en cuanto a lo de las esquinas CSS redondeadas donde funcione en todos los exploradores. En la plantilla anterior he utilizado "-moz-border-radius". Que me decís sobre eso?

saludos!!

[cristian_cena]

No veo las esquinas redondeadas en firefox, -moz-border-radius es necesario para que la propiedad css3 border-radius sea interpretada por firefox. Si bien tengo entendido que usándola la hoja de estilo no validá en http://jigsaw.w3.org/css-validator/. De todos modos la uso.
Suerte con eso, veo que mejoro la maqueta

[matrux]

Hola a todos, necesito crear 2 divs al lado del contenedor, una a la izquierda y otra a la derecha, la izquierda me quedo mas o menos como queria, pero la derecha me quedo debajo del contenedor en vez de al costado, que esta mal?

HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="estilo.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Poner algo alos costados del contenedor</title>
</head>

<body>
<div id="Izquierda">
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
</div>
<div id="MainContainer">
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
</div>
<div id="Derecha">
  <p>Esto deberia ir a la derecha</p>
  <p>Esto deberia ir a la derecha</p>
  <p>Esto deberia ir a la derecha</p>
</div>
</body>
</html>

CSS

Código:

@charset "utf-8";
/* CSS Document */

html{
	height:100%;
}

body {
	height:100%;
}

#Izquierda {
	margin:left;
	background-color:#ececec;
	width:200px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
	float: left;
	color: #00F;
}

#MainContainer {
	margin:auto;
	background-color:#ececec;
	width:400px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
}

#Derecha {
	margin:right;
	background-color:#ececec;
	width:200px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
	float: right;
	color: #F00;
}

[vgonga1986]

Tienes que declarar float el div del centro, para que el de la derecha flote y se coloque donde quieres.

Añade float:left a #MainContainer y reajusta los márgenes y posiciones.

Espero que te sirva, un saludo.