Saffron Stroke - Your Web Design Resource » wrap text http://www.saffronstroke.com Design Blog Wed, 11 Jan 2012 06:36:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Float an image and wrap text around it in Microsoft Expression Web http://www.saffronstroke.com/2009/04/28/float-an-image-and-wrap-text-around-it-in-microsoft-expression-web/ http://www.saffronstroke.com/2009/04/28/float-an-image-and-wrap-text-around-it-in-microsoft-expression-web/#comments Tue, 28 Apr 2009 16:30:00 +0000 Minal http://saffronstroke.com/?p=469


CSS property float is used to position (float) a block level element within another element. You can float block level elements like divisions <div>, paragraphs <p>, images <img /> and lists <ul> to left or right of the page. Float is widely used to align image and wrap text around it in a same container. Let us see how.

Float an image to the left in a paragraph and wrap text around it

Set a style for the image by creating a New Style in Apply/Manage Styles task pane. In the New Style dialog box given below; choose Layout and set float: left.

 img_style

Then in Box category, set margins as top: 5px, right: 10px, bottom: 5px and left: 0px. Also set a border for the image in Border category. Click on OK to generate below mentioned style;

<style type=”text/css”>

img{

                float: left;

                margin:5px 10px 5px 0px;

                border: thin black dotted;

}

</style>

In the main body of the page, add a paragraph, enter the text and embed the image into it. Go to the Design view and type in the text. To insert the image, go to Insert menu > Picture > From File… Then browse to the path of the image and click on Insert. In the Code view the code looks as follows:

<body>

       <p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<img src=”arrow_right_green.png” style=”float:left”/>

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>

</body>

</html>

Save the file and preview it in the browser. The output will be as follows:

output

]]> http://www.saffronstroke.com/2009/04/28/float-an-image-and-wrap-text-around-it-in-microsoft-expression-web/feed/ 1