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:

3 columns layout

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">             &nbsp;&nbsp;&nbsp;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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -