Es sencillo, las capas se ajustan por defecto al contenido a no ser que especifiques el tamaño previamente.
Si ajustas el ancho la capa cortara el texto donde corresponda estirandose hacia abajo, de haber una imagen(por ejemplo puede ser otra cosa) que superara el ancho de la capa pueden suceder varias cosas(depende de como este configurado por defecto o como lo configures tu)
- Visible: la imagen se vera sobresaliendo de la capa como si fuera un postit que apegaras a un lateral del monitor (para que te hagas una idea del efecto)
- hidden: la imagen quedara cortada por la capa y no se vera mas alla (como una ventana)
- scroll: aparecera una barra de desplazamiento que te permitira desplazar el contenido de la capa para poder verlo en su totalidad (como cuando escribes mucho aqui o ponen un codigo muy largo)
- auto: cogera los valores definidos por defecto en el navegador (de entre los anteriores)
En el ejemplo que te he puesto defines el ancho de la capa por lo que el texto en general no superara ese ancho sino que se adaptara al contenedor en el que se encuentre.
Las capas por defecto tambien son bloques y, de no definir posicion, se situan unas debajo de otras no es aconsejable dejarlas a su libre albedrio si no quieres tener efectos no deseados (por supuesto puedes dejarlas sin mas si los valores por defecto son los que te interesan.
Para situar capas unas al lado de otras puedes hacerlo definiendo su posicion o bien usando la propiedad float.
Para situar las capas puedes hacerlo de forma
absoluta "
absolute"(a la pagina)
relativa "
relative"(tomara como referencia el elemento que la contiene)
estatica "
static"(ignorara los valores de posicion que le pongas y aparecera segun la hayas situado en el codigo eso si respetando los margenes que hayas definido) o
fija "
fixed" (esta ultima mantendra la capa en su sitio sin moverse aunque hagas scroll con la pantalla, ideal para menus que quieras que se vean siempre o para que el membrete se vea mientras se desplaza la pagina)
De los tipos de posicion que te he puesto antes solo static afecta a otros elementos, el resto dejan la capa en una especie de limbo flotante por encima de otros elementos o por debajo de ellos (segun su z-index).
Para mas informacion deberias dirigirte a w3c.org y buscar el manual de css en español.