html - CSS different columns settings -
i have div:
<div style="position: relative; width: 100%; -moz-column-count:3; -webkit-column-count: 3; -moz-column-gap: 2%; -webkit-column-gap: 2%;">text...text</div> i need make last column start below other ones. think picture gonna help:

the cable image wider columns, it's out of div. html align=top on image won't work. can control single column?
any ideas? one...
layout structure:
<div> <div style="width: 100%; background-image: url(images/bg_pg10-11.jpg); background-repeat: repeat;"> <div style="width: 100%;"><img src="images/port/pg10_11.png" alt="" width="89%" border="0" style="margin: 1%; margin-top: 2%; margin-bottom: 1%; margin-left: 5.5%;"></div> <div style="width: 100%;"><img src="../images/port/tit_notas_merc2.png" alt="" width="20.5%" border="0" style="margin-bottom: 7%; margin-left: 5.5%;"></div> <div style="width: 73%; margin-left: 19%;"><img src="images/port/titulo_pg10-11_pt.png" alt="" width="100%" border="0"></div> <img src="images/img01_pg10-11.png" width="32%" border="0" style="position: absolute; margin-left: 68%;" align="top"> <div style="width: 73%; margin-left: 19%; margin-top: 2%;"> <div class="txtinterno" style="position:relative; width: 100%; border:0px solid #000000; -moz-column-count:3; -webkit-column-count:3; -moz-column-gap:2%; -webkit-column-gap:2%;"> <img src="../images/retangulo_tri_vd2.png" alt="" width="100%" border="0"> durante muito tempo o gás natural era “persona non grata” na exploração de petróleo, pois exigia uma série de procedimentos de segurança que encareciam e complicavam atividades de extração. mas, partir dos anos 1980, o consumo entrou em expansão e o gás natural transformou-se em uma das fontes de energia fóssil registrar maior crescimento no mundo. </div> </div> </div> </div>
you need put image inside div text able "see" should start. can use overflow: visible; on div allow image render outside div.
edit: have working, issues arise when div set column-mode.. http://jsfiddle.net/d2zmv/1/
edit2: second version, using background image extend parts gets cut off. (thanks alexander lozada hint) http://jsfiddle.net/cu82s/1/
Comments
Post a Comment