Maquetación rápida con css

Boas a todxs,

Hoxe toca saltar da administración de gnu/linux a css, despois dun tempo "traballando" do lado cliente da web con html, css e algo de javascript e agora que andamos con isto en clase dinme conta que hai pequenos detalles que poden volvernos tolos á hora de maquetar unha web con caixas e css e en realidade non é tan complicado, aí van uns pequenos apuntamentos.

Empregaremos algo deste estilo de exemplo:

***********************************
*////////header//////////*
***********************************
*/////////menu//////////*
***********************************
*/columna1//**/columna2//*
***********************************
*////////footer//////////*
***********************************

header, menu, columna1, columna2 e footer serían ids para cada unha das partes, que serán caixas (div) da nosa web e a súa vez estarán contidas dentro dun "contenedor" que será a caixa principal que dará tamaño, centrado, un marco bonito, etc... á nosa web. Facemonos a idea de como sería o html, non?

De xeito default cada caixa irase colocando de xeito relativo con respeito ao resto, e dicer, de momento irán ocupando un ancho do 100% do contenedor e irán unha debaixo de outra.

Cal será a primeira necesidade que teremos de modificar isto? Pois para colocar as "columna1" e "columna2". Para isto precisaremos modificar o ancho de cada caixa para que collan as dúas unha ao lado de outra dentro da caixa "contenedor_columnas", isto faremolo grazas ao float, é dicer, faremos que a caixa se posicione de xeito flotante o máis á esquerda ou dereita que poida, isto é, con float: left poderemos facer que a caixa se desplace o máis ás esquerda que poida. Imos ver o css:

div#columna1 {
  width: 50%;
  float: left;
}
div#columna2 {
  width: 50%;
  float: left;
}

Unha vez temos isto, a disposición da web podemos pensar que é a desexada pero o que pode pasar é que a caixa "contenedor_columnas" ao flotar os elementos non colle as dimensións delas, pódese arranxar con posicionamento absoluto no contenedor_columnas pero o que pasará e que teriamos que maquetar o resto tamén con posicionamento absoluto, por este motivo pasará que a caixa "footer" acabará de xeito relativo contiguo ao anterior div e as flotacións debaixo pisandose. Aquí un dos grandes apuntamentos que me serviron para librarme de quebradeiros de cabeza. A propiedade clear, isto o que fai non permitir flotacións "left", "right" ou "both", deste xeito o div seguinte non terá en conta os float e continuará de xeito relativo debaixo destes.

div#footer {
  clear: both;
}

Agora si que teremos a páxina como queremos a falta de pola "bonita" dandolle dimensións á caixa "contenedor", background, cores, tipo de letra, ...

Outra cousa que nos pode traer quebradeiros de cabeza é o relativo aos tamaños das caixas cando empregamos caixas flotantes. Se empregamos padding ou margin temos que ter en conta que ocuparán unhas dimensións "x" e que se non o temos en conta á hora de dimensionar as caixas como no exemplo ocupando o 100% (50% e 50%) do ancho con elas ao ocupar máis do previsto non conseguiremos flotalas correctamente.

Tendo en conta eses dous detalles non debería ser difícil maquetar algo de xeito sinxelo e áxil, agora o difícil é pola bonita pero niso xa depende de gustos, deseñadores e xente máis creativa ca min.

Agardo gostedes do artigo!
Saúde!