¡Lo primero es lo primero!

Ingredientes : dos div alineados horizontalmente (cada uno tiene el 50% del ancho del padre) y algo de texto para colocar en el primer div ( izquierda ) y luego, si se desborda, en el segundo ( derecha ). Los divs tienen una altura de 200px.

El texto proviene de un script PHP que repite una variable ( <p><?php echo $foo; ?></p> ) que contiene todo el texto. Entre paréntesis escribí una etiqueta <p> . El DOM se parece a esto:

 <div class="thecontainer"> <div class="theleftone"> <p><?php echo $avariablewithsometext; ?> </p> </div> <div class="therightone"> <!-- everything is permitted --> </div> </div>

Problema: estoy tratando de lograr este objetivo usando las propiedades flexibles de CSS, pero no puedo encontrar una manera de colocar el texto desbordado del primer div en el segundo.

Pregunta: ¿Cómo puedo poner el texto desbordado en el segundo div dejando limpio el script PHP?

Demostración real:

 .thecontainer{ width:100%; height:100px; overflow: hidden; display: block; } .therightone { background-color: red; width: 50%; height:100px; display: block; float:right; } .theleftone { background-color: blue; width: 50%; height:100px; display:block; float: left; }

 <div class="thecontainer"> <div class="theleftone"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p> </div> <div class="therightone"> <!-- everything is permitted --> </div> </div>