Hola tengo una consulta, veamos si alguien me puede dar una mano =D
Estoy usando css3 para generar columnas en un párrafo, pero en el mismo div pongo una imagen flotada, sin embargo no se me ocurre como podría hacer que la imagen ocupe más de una columna, dejo el código y la dirección donde se ve online el problema:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
color:#666;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#wrapper {
width:600px;
margin:auto;
}
#columnaWrapper {
-moz-column-count: 3;
-moz-column-gap: 2em;
-webkit-column-count: 3;
-webkit-column-gap: 2em;
width:600px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="columnaWrapper">
<div style="float:left;">
<img src="imagen.jpg" />
</div>
<p>Suspendisse eu purus orci. Nulla facilisis aliquet tincidunt. Maecenas feugiat, eros at venenatis lobortis, lorem odio rutrum mauris, luctus dictum odio neque et leo. Fusce ut nulla at nulla pretium pulvinar eu in magna? Curabitur molestie libero sed arcu imperdiet dignissim egestas est faucibus. Aliquam tempus eleifend massa vitae tincidunt. Donec odio nulla, scelerisque nec cursus quis, faucibus et nibh? Maecenas placerat elit sit amet leo imperdiet dignissim. Sed malesuada risus quis nisl molestie ut vulputate justo lacinia? Nunc urna nulla, cursus non tempor nec; egestas vel lorem. Duis aliquet consectetur erat, sit amet eleifend enim gravida sit amet. Nunc lacinia, erat sit amet fermentum venenatis, orci mi tincidunt ligula, non lacinia dolor felis eget risus. Pellentesque auctor ante ac purus porta id gravida erat convallis. Curabitur ut tincidunt metus. Praesent iaculis congue mattis. Phasellus consectetur, tortor nec gravida pharetra, diam nisl lacinia sem, ut imperdiet neque leo id ante. Phasellus vel tellus nec velit hendrerit consectetur!</p>
<p>Ut a odio tortor, vitae placerat nunc. Cras id augue libero. Fusce ullamcorper dignissim dolor, at iaculis metus imperdiet ac. Phasellus dapibus, ipsum in mollis porta, leo elit varius arcu, in cursus purus mauris nec enim. Aliquam eget libero sit amet leo porttitor mollis quis sit amet nibh. Morbi rutrum aliquet fermentum. Nulla facilisi. Nam facilisis iaculis odio, et convallis nisl rhoncus vel. Etiam consequat, dolor in mattis faucibus, elit tortor gravida enim, sed varius tortor nisi eget enim. Donec non diam id eros elementum consectetur ut sed sapien. Proin sapien sem, ornare placerat cursus eget, pellentesque sed lectus. Sed et augue purus. Phasellus viverra dictum metus in varius. Pellentesque convallis sollicitudin molestie. Etiam gravida, nibh sit amet faucibus bibendum, lectus mi hendrerit mauris, eu rutrum massa dolor scelerisque orci? Sed in hendrerit ipsum?</p>
<p>Nam urna felis, ultricies vel ultricies et; elementum vitae purus. Cras venenatis quam eu turpis tincidunt placerat! Donec aliquet justo at dui consequat id mollis nunc pulvinar! Proin semper volutpat nisi, quis consequat lorem lobortis sagittis! Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tincidunt risus ut diam iaculis et aliquam arcu consectetur? Nunc ornare ultrices ipsum, vitae mollis augue ornare eu! Cras quis lectus quis elit fermentum condimentum egestas quis erat! Quisque interdum purus non libero aliquet tincidunt. Suspendisse ligula augue, convallis in mollis non, sodales ac sem. Etiam tincidunt ultrices tempus. Aliquam sed ornare lorem! In luctus pharetra erat, vitae porta sem ullamcorper ac! Sed in ligula ac felis aliquet facilisis quis in justo. Sed mattis sodales lacus non scelerisque. Pellentesque commodo, velit sit amet volutpat molestie, augue nisl pretium ante, quis varius tortor lectus quis mauris. Proin vitae orci eu justo aliquet dapibus. Sed nunc sem, feugiat at elementum quis, consequat non diam. Pellentesque sit amet massa id velit rhoncus faucibus.<br />
</p>
</div>
</div><!--#wrapper-->
</body>
</html> http://buenaondaperu.org/concurso/columnis/
Ahí la dirección