Div que muestre cualquier contenido

Necesito crear una div que muestre cualquier contenido...

algo así como está en la foto

Si puedes poner una imagen de mayor tamaño te ayudo pero si es para poner dos columnas es facil, seria algo asi:

Código HTML :

<div id="contenedor">

<div id="lateral">
<p>Aquí ira el contenido alineado a la izquierda</p>
</div>

<div id="principal">
<p>Aquí ira el contenido principal a lado del contenido o menú lateral</p>
</div>

</div>

El CSS seria asi:

Código HTML :

#contenedor{
text-align: left;
width: 750px;
margin: auto;}

#lateral{
width: 180px;  /*Este será el ancho que tendrá tu columna*/
background-color: #CCCCCC;  /*Aquí pon el color del fondo que quieras para este lateral*/
float:left; /*Aqui determinas de lado quieres quede esta "columna" */
}

#principal{
margin-left:190px; /*Este margen hace que no se encime el contenido en tu menúlateral, es     importante que pongas un pocos pixeles más que el ancho  de tu columna lateral*/
background-color: #FFFFFF;
border:#000000 1px solid; /*ponemos un dorde para que se vea bonito*/
}

Saludos

cristianangulonova:
A ver si entendí lo mismo que Pierre9, ¿quieres que ambas columnas tengan la misma altura sin importar la cantidad de contenido de cada una?, es decir, como una tabla.

Más limpia que la de Pierre9 , si le pones por ahí un min-height, etc, haces lo que dice DriverOp:

Código :

<style>
#clear { clear: both; }
#contenedor {
   margin: 0 auto;
   height: 700px;
   width: 1150px;
   padding: 50px;
   background: #222;
}
#sidebar {
   float: left;
   height: 100%;
   width: 350px;
   background: white;
}
#contenido {
   float: right;
   height: 100%;
   width: 750px;
   background: #de8500;
}
</style>

<div id="contenedor">
   <div id="sidebar">



   <div id="clear"></div>
   </div>
   <div id="contenido">

   </div>
</div>