Altura y ancho de elementos de sitio?

[Milen]

Hola a todos, no soy diseñadora pero por razones desconocidas me pusieron a hacerle un poco al html, mi duda creo es básica pero no he encontrado en la red algo que m oriente un poquillo, alguien podria explicarme como establecer el ancho y la altura de los elementos en una pagina llamense divs, listas, etc? hasta ahora lo he ido manejando utilizando las celdas de una tabla, pero conforme he leido mas y mas del tema, me he enterado es mala practica basar la estructura de un sitio en tablas. Ya manejo css's y divs, sera que por ahi esta la respuesta? Agradeceria una orientación. Gracias.

[daPhyre]

Primero, pones a tu elemento una clase:

<div class="caja">

Luego, en CSS le das el tamaño:

.caja{width:200px;height:150px;overflow:auto}

No olvides el punto al comenzar. Si no le pones un height, se ajustará a la altura de su contenido. En el ejemplo te pongo un overflow:auto, ya que si el contenido es más grande que el tamaño de la caja, esto hará que aparezcan una flechas de desplazamiento.

Espero te ayude, si necesitas más información, siempre estamos dispuestos a ayudarte. Éxito

[cristian_cena]

Hola Milen:

Lo que dice daPhyre es correcto, pero con su permiso quisiera agregar algo que es fundamental:

el ancho real de tus cajas css (si no sabes que es busca en google "css box") esta dado por la suma de margin + padding + width.
es decir si por ejemplo tienes asignado a tu div un width=200px un padding-left:10px; y un margin-right:10px; Entonces el ancho real de tu div será 200px+10px+10px=220px

Ten presente este detalle porque tu cerebro te lo va a agradecer a la hora de flotar tus divs

Cito "me he enterado es mala practica basar la estructura de un sitio en tablas. Ya manejo css's y divs, sera que por ahi esta la respuesta? Agradeceria una orientación. Gracias."

Para ello te recomiendo los siguientes links aportados por mikmoro:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html

Saludos!

[zerokilled]

el ancho real de tus cajas css (si no sabes que es busca en google "css box") esta dado por la suma de margin + padding + width.

te falto mencionar border

[cristian_cena]

Hola zerokilled, tienes razón:
Finalmente, el ancho total será la suma de width (ancho del contenido) + padding (distancia desde el border hasta al contenido de la css-box) + margin (distancia desde el border de la css-box hasta el objeto más cercano) + border

Gracias por su respuesta, creo que los siguientes links serán útiles para profundizar en el tema:

http://www.librosweb.es/css/capitulo..._de_cajas.html

... y sobre todo teniendo en cuenta que IE no respeta los estándares de la w3c y modifica el ancho de las cajas-css (bugs de ie 5, 6 y 7):

http://www.maestrosdelweb.com/editorial/cssmodelocajas/
http://www.labrujulaverde.com/css/di...fox-ie6-e-ie7/
http://www.456bereastreet.com/archiv...css_box_model/

Saludos!