Published on: 16 July, 2013

How to wrap text inside a div using CSS?

Tumblr Digg Google Plus

You may wonder how you can wrap text or images inside a div. This kind of example is mostly seen in the newspaper or article page, where the image is wrapped inside text and usually located in the top right hand side of the text.

It is actually quite easy to do in css, what you need to do is to create a main wrapper div that will wrap the image or text. See below example, the :

<div class="maincontent">
    <div class="rightbox">
        <p>Geio erati congi ina ete nuni keumen adipi nequi sipoi augue sito timon ultri eto uto sagita moriol ameto pras curio nisio comodi a uria solicto ruti ut sondue velio dapibu curiosue matio dera etui famera acio palti ratrum velizu menecoi sito timoi scelosqui estelio egetsi welz</p>
    </div>

    <p>Lacui haoti iaculo acio a adipi doi ultrico lorit curab dalis dignisa valio erati ina welz nequel gravido dulia nulai vuliputu aiculi muis sapio uloe sceleris uria ut inhac dicti timoi eupa sagita donei turipo palti masie velpt at goi telli dera dea nune turipi egetsi loi geio congi pesetaie ameto atic velizu pharetu etui malesudi tikoan curio nequex gulio mekuai convalit diami inim gravidue sito vezi timon ticoduy conviluis ratrum sito nequi liebeo famera matio ememper plato impero molie estelio eua didaminia velio ameto sedoi ameito dictio sub ameto eto loroi ursiue hatibo frinuilo vitael sotpio pele nibhue facilisoe ani idu scelosqui in lopiun</p>

    <p>Dea acio pesetaie welz mauri vezi ut uto sondue nequel timoi tikoan telli turipo nequi keumen ete enterdum uria diami ultrico comodi orai velo ina sagita eto in gulio vitael ameto gravido plato eua frinuilo tuxi fringala lacui lopiun etui menecoi atic sceleris sito velio loi velo iaculo lorit aiculi ratrum curab nisio sub turipi sipoi sotpio moriol estelio solicito palvinor egetsi ameito sedoi convalit a loroi dicti ursiue sito matio nulai vuliputu masie buis donio didaminia mauriz haoti tismaei donei famera timon quam risusu pras fremen duo scelosqui ameto pharetu curio mekuai geio feloxi gravidue eupa velizu impero sito menai ruti facilisoe hacio ultri gulao uloe goi liebeo neci</p>

    <p>Conviluis matio gujial muis acio loroi mauri eupa augue gravido dicti moriol nuni sedoi mauriz loi eua lorit a eto ultrico sipoi eua vezi timoi telli egetsi atic aeni pele frinuilo menai gulio hatibo sub adipi inhac fringala risusu comodi enterdum tikoan curio solicito masie lacui nisio lopiun iaculo keumen erati congi quam pesetaie duo palvinor dalis uria plato dignisa aiculi dea at scelerisu velo ut palti timon sagita inim nequel doi ratrum impero sito ameto gravidue etui telei donio hacio ameito in dulia buis curiosue turipo menecoi fremen diami</p>

    <p>Aiculi hatibo ina facilisoe moriol ruti velizu orai vezi nequex sito geio iaculo solicto tuxi ratrum tikoan lacui sotpio nulai nisio ememper augue uto loi ameto sito gravidue hacio diami timon pharetu atic ameito fremen risusu molie sagita egeto velo velio neci sub keumen pesetaie ultrico dignisa mauri matio curab sedoi dalis solicito didaminia ani dera at acio eua quam palti carai tismaei idu gravido eua fringala malesudi vuliputu curio vitael a scelosqui goi ut</p>
 </div>
<div class="clear"></div>

Here is the css style:

/* We set the padding to 10px and margin to 10px except for the margin-top
  you will need to specify the width in here otherwise it will not work if you have a smaller width dimension of the main text 
*/
.rightbox{
    padding:10px;
    border:solid 1px #000000;
    margin:0 10px 10px 10px;
    float:right;
    width:250px;
 }

/* Remember to include this one because it will clear the float */   
.clear{
	clear:both;
}        

See the quick demo here

Geio erati congi ina ete nuni keumen adipi nequi sipoi augue sito timon ultri eto uto sagita moriol ameto pras curio nisio comodi a uria solicto ruti ut sondue velio dapibu curiosue matio dera etui famera acio palti ratrum velizu menecoi sito timoi scelosqui estelio egetsi welz

Lacui haoti iaculo acio a adipi doi ultrico lorit curab dalis dignisa valio erati ina welz nequel gravido dulia nulai vuliputu aiculi muis sapio uloe sceleris uria ut inhac dicti timoi eupa sagita donei turipo palti masie velpt at goi telli dera dea nune turipi egetsi loi geio congi pesetaie ameto atic velizu pharetu etui malesudi tikoan curio nequex gulio mekuai convalit diami inim gravidue sito vezi timon ticoduy conviluis ratrum sito nequi liebeo famera matio ememper plato impero molie estelio eua didaminia velio ameto sedoi ameito dictio sub ameto eto loroi ursiue hatibo frinuilo vitael sotpio pele nibhue facilisoe ani idu scelosqui in lopiun

Dea acio pesetaie welz mauri vezi ut uto sondue nequel timoi tikoan telli turipo nequi keumen ete enterdum uria diami ultrico comodi orai velo ina sagita eto in gulio vitael ameto gravido plato eua frinuilo tuxi fringala lacui lopiun etui menecoi atic sceleris sito velio loi velo iaculo lorit aiculi ratrum curab nisio sub turipi sipoi sotpio moriol estelio solicito palvinor egetsi ameito sedoi convalit a loroi dicti ursiue sito matio nulai vuliputu masie buis donio didaminia mauriz haoti tismaei donei famera timon quam risusu pras fremen duo scelosqui ameto pharetu curio mekuai geio feloxi gravidue eupa velizu impero sito menai ruti facilisoe hacio ultri gulao uloe goi liebeo neci

Conviluis matio gujial muis acio loroi mauri eupa augue gravido dicti moriol nuni sedoi mauriz loi eua lorit a eto ultrico sipoi eua vezi timoi telli egetsi atic aeni pele frinuilo menai gulio hatibo sub adipi inhac fringala risusu comodi enterdum tikoan curio solicito masie lacui nisio lopiun iaculo keumen erati congi quam pesetaie duo palvinor dalis uria plato dignisa aiculi dea at scelerisu velo ut palti timon sagita inim nequel doi ratrum impero sito ameto gravidue etui telei donio hacio ameito in dulia buis curiosue turipo menecoi fremen diami

Aiculi hatibo ina facilisoe moriol ruti velizu orai vezi nequex sito geio iaculo solicto tuxi ratrum tikoan lacui sotpio nulai nisio ememper augue uto loi ameto sito gravidue hacio diami timon pharetu atic ameito fremen risusu molie sagita egeto velo velio neci sub keumen pesetaie ultrico dignisa mauri matio curab sedoi dalis solicito didaminia ani dera at acio eua quam palti carai tismaei idu gravido eua fringala malesudi vuliputu curio vitael a scelosqui goi ut

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.