Estoy empezando a maquetar con CSS y tengo algunas dudas. ME he creado una pagina de prueba en la que estoy trasteando para ir aprendiendo. Y me surgen algunas dudas. Siguiendo un tutorial (en ingles, por eso de no haberlo pillado todo bien, os pregunto) he visto que para meter una linea de texto donde hay un texto a la izquierda y otro a la derecha, y que van en unos div (en mi caso, "creditos-left" y "creditos-right") antes crea un div vacio, que en este caso yo le he llamado "creditos". Y que me he dado cuenta de que sin este div vacio no se colocan donde deberian. Pero no entiendo porque. Es decir no entiendo porque necesito poner este div vacio llamado "creditos". Mirar tengo este xhtml:
Código HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pilar Migallón</title>
<style type="text/css">
<!--
-->
</style>
<link href="css/layout-2.css" rel="stylesheet" type="text/css" />
</head>
<body class="fondo">
<div id="contenedor">
<div id="logo"><img src="links/Safari.png" width="256" height="256" /></div>
<div id="cuerpo-1"></div>
<div id="cuerpo-2"></div>
<div id="cuerpo-3"></div>
<div id="crditos"></div>
<div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
<div id="creditos-right">Colocar aquí el contenido para id "creditos-right"</div>
</div>
</body>
</html>
y este CSS:
Código:
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#contenedor {
width: 734px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#contenedor #logo {
height: 256px;
width: 256px;
position: absolute;
right: -50px;
top: -215px;
}
#contenedor #cuerpo-1 {
background-color: #FF0000;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-2 {
background-color: #CCCCCC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-3 {
background-color: #0000CC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}
#contenedor #creditos-left {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: left;
padding-top: 7px;
padding-left: 12px;
float: left;
width: 354px;
}
#contenedor #creditos-right {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
float: right;
width: 356px;
text-align: right;
padding-top: 7px;
padding-right: 12px;
}