Diseño de periódico con dos columnas y un cuadro de cotización centrado?

Question

Estoy buscando una manera de crear un diseño de periódico para un sitio web donde el contenido se divide en dos columnas, pero con un cuadro de cita en el medio de las columnas.

que saben cómo hacer dos columnas utilizando CSS3 con el

-moz-column-count: 2; 
-moz-column-gap: 10px; 
-webkit-column-count: 2; 
-webkit-column-gap: 10px; 

Pero ¿Cómo se crea el cuadro de la cita en el medio y ¿hay alguna manera de que me “envolver” el contenido dentro de las columnas de todo el caja en el medio?

He adjuntado una ilustración de lo que quiero decir.
Por favor, imagine en esta ilustración que el texto en las dos columnas está envuelto alrededor del cuadro en el medio.

Answer 1

supongo que está mal, pero ...:

<style> 
#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-top:-150px; 
    margin-left:-100px; 
    border:1px solid; 
    width:200px; 
    height:200px; 
} 
</style> 
<div id="one">ONE</div> 
<div id="three">3</div> 
<div id="two">two</div> 

Answer 2

Se puede lograr, pero ... no es flexible, se tendrá que ajustar el posicionamiento de casi cualquier cambio usted hace al texto.

DEMO

HTML

<div class='newspaper'> 
    <img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'> 
    <p><!-- paragraph text --></p> 
     <!-- nine more paragraphs --> 
</div> 

CSS He añadido:

.newspaper { 
    position: relative; 
    width: 580px; 
    padding: 10px; 
    margin: 0 auto; 
    box-shadow: 1px 1px 5px; 
    column-count: 2; 
    column-gap: 20px; 
    font-size: 12px 
} 
p { margin: 0 0 10px; } 
p:nth-child(3):before, p:nth-child(8):before { 
    width: 145px; 
    height: 200px; 
    content: ''; 
} 
p:nth-child(3):before { 
    float: right; 
} 
p:nth-child(8):before { 
    float: left; 
} 
.newspaper img { 
    position: absolute; 
    z-index: 2; 
    top: 85px; left: 50%; 
    margin: 0 -150px; 
} 

Answer 3

He aquí una solución que funciona:

DEMO HERE

Esto daría flexibilidad a sus columnas. Sin embargo, su área de cotización debería ser una altura/ancho fijo. Si desea ajustar el área de cotización, cambie los anchos/alturas de los divs espaciales al comienzo de cada div de columna. No es una solución elegante, pero funciona.

CSS:

#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position: absolute; 
    left:50%; 
    top:100px; 
    margin-left:-300px; 
    border:1px solid; 
    width:600px; 
    height:200px; 
    background: maroon; 
    color: white; 
} 

HTML:

<div id="one"> 
    <div style="float: right; height: 80px; width: 10px;"></div> 
    <div style="float: right; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. </div> 
<div id="two"> 
    <div style="float: left; height: 80px; width: 10px;"></div> 
    <div style="float: left; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 

Aviso: Esta solución se basa en Peteris (que no envuelva alrededor de la div cita) a continuación.

Answer 4

http://jsfiddle.net/iansan5653/xbfYD/4/

que modifica la respuesta de @ sean_mcgee añadiendo un poco de JavaScript para dividir las columnas para usted. Simplemente coloque el texto en el newspaperArticle div, y ponga su cita en el campo de JavaScript. No funciona bien en una pantalla pequeña porque las palabras son más largas que el espacio, por lo que aquí hay un ejemplo de pantalla completa: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/. El único problema es que podría dividir una etiqueta HTML, así que ten cuidado.