Quiero que un div le contenga a otro pero no funciona

Tengo un portal que estoy haciendo, el problema es que lo siguietne,
cuando pongo solo texto dentro del div principal

Código :

<div class="principal">
texto
</div>

Le envueve el div a todo el texto y eso es lo que quiero que haga:



Ahora cuando pongo otro div que se llama revista, la barra principal no le envuelve
Esto es lo que hago

Código :

<div class="principal">
<div class="revista">
blablabl revista
</div>

Esto es el css que uso

Código :

.principal{
      //height:450px;
      background-color:#CCCCCC;
      border-style:solid;
      border-width:1px;
      border-color:#000000;
      margin:10px 0px 0px 220px;
      padding:10px;
      width:750px;
   }
.revista{
   margin:5px;
   padding:0px;
   border-color:#000000;
   float:right;
}

Ya descubri porque y cuando pasa esto, esto pasa cuando uso float dentro de revista, hay alguna forma de que no pase esto con float?

HTML

Código :

<div class="clear"></div>

CSS

Código :

.clear{ clear:both; }

Solamente agrega eso, el float como su nombre lo indica te flota los divs a los cuales lo usas.

Suerte