Hola, estoy haciendo una plantilla html/css y la cosa es que quiero que unas capas se alarguen he probado con lo del clear both pero no lo consigo, tambien vi otra forma con hr, este el codigo:

hr.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}La imagen de mi plantilla es esta:


En A va una imagen y en B el texto, que quiero que se alargue la capa segun el texto aumente, pero entonces tambien deberia aumentar la capa azul no?

El codigo de A es:
  width: 402px;
  height: 252px;
  float: left;
El codigo de B es:
  width: 478px;
  height: 250px;
  float: left;
El codigo de la capa azul:
  width: 96%;
  height: 273px;
Alguna idea?

Ya lo he conseguido solucionar, es así:

hr.clear {
  background: none;
  border: 0;
  clear: both;
  display: block;
  float: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
Código A:
  width: 402px;
  height: 252px;
  float: left;
Código B:
  width: 478px;
  height: auto;
  float: left;
Capa azul:
  width: 478px;
  height: auto;
Antes de cerrar la capa azul con </div> hay que poner <hr class="clear">

De esta forma se obtiene el resultado