Añadir al documento html:
<h2 class=»titulosecundario»>RESUMEN DE LA TRAYECTORIA PROFESIONAL</p>
<p>
<ul class=»listado»>
<li>Bailarina del Ballet Nacional de Cuba</li>
<li>Profesora de la Academia Nacional de Baile</li>
<li>Directora del Ballet Nacional de Cuba</li>
</ul>
</p>
En el CSS:
.titulosecundario {
border: 1px solid;
}
.listado {
border: 1px solid;
}
FLOAT
Permite definir si un elemento debe flotar hacia el lado derecho, izquierdo o no flotar. Valores: right (el elemento flota hacia el lado derecho), left (el elemento flota hacia el lado izquierdo).
Ejemplos:
.tituloprincipal {
float: left;
}
.titulosecundario {
float: right;
}
.descripcion {
float: left;
}
.listado {
float: right;
}
Cambiar los anchos de la siguiente forma:
.tituloprincipal {
width: 130px;
}
.titulosecundario {
width: 130px
}
.descripcion {
width: 130px
}
.listado {
width: 130px
}
De esta forma los elementos tienen un ancho suficiente para que quepan los elementos mostrados a un lado y a otro.
La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
Si queremos que en el lado izquierdo se muestre el título principal y debajo la descripción, mientras que en el lado derecho se muestra el título secundario y debajo el listado, una opción es crear dos elementos div, uno con la propiedad float con valor left y el otro con valor right. Cada elemento div tendrá un ancho definido y dentro de cada uno incluiremos los elementos deseados sin utilizar la propiedad float:
<div class=»columna_izquierda»>
<h1 class=»tituloprincipal»>Rosario Suárez…
</div>
<div class=»columna_derecha»>
<h2 class=»titulosecundario»>….
</ul>
</div>
El CSS quedaría así:
.columna_izquierda {
float: left;
width: 250px;
border: 1px dashed red;
padding: 5px;
}
.columna_derecha {
float: right;
width: 250px;
border: 1px dashed blue;
padding: 5px;
}