Wrap Text Around a Div or Image Using With The CSS

Some time we need to wrap text around a DIV or Image, that time we confused and thinking how to wrap text around the div and image, then we search on google and find the way.
I have found the good solution for how to wrap text around the DIV or image, here I am share with you example of how to Wrap text around a div or image using with the css, it's very easy to Wrap text around a div or image with the css

Demo

DIV with content or Image in the Middle of the text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ipsum, nec tincidunt mauris suscipit non. Nullam euismod est in dui vehicula ornare quis non nulla. Sed ultricies eros justo, et tempor ligula viverra vel. Pellentesque semper mattis mattis. Morbi ac fringilla purus, in ullamcorper lacus. Duis eget molestie turpis, nec lobortis enim. Vestibulum iaculis non odio id venenatis. Nulla malesuada orci sed arcu ultrices pulvinar. Fusce orci nisl, aliquam eu blandit non, ornare eu urna. In hac habitasse platea dictumst. Quisque auctor dignissim elit, id condimentum odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin dui quam, lobortis nec sapien eget, facilisis blandit sapien. Integer ornare felis eget orci consectetur vulputate. Ut efficitur fermentum lacus sed vulputate.

DIV with content or Image in the Middle of the text

The HTML Markup

<div class="wrap-div-topSpacer"></div>
<div class="wrap-div"> DIV with content or Image in the Middle of the text </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ipsum, nec tincidunt mauris suscipit non. Nullam euismod est in dui vehicula ornare quis non nulla. Sed ultricies eros justo, et tempor ligula viverra vel. Pellentesque semper mattis mattis. Morbi ac fringilla purus, in ullamcorper lacus. Duis eget molestie turpis, nec lobortis enim. Vestibulum iaculis non odio id venenatis. Nulla malesuada orci sed arcu ultrices pulvinar. Fusce orci nisl, aliquam eu blandit non, ornare eu urna. In hac habitasse platea dictumst. Quisque auctor dignissim elit, id condimentum odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin dui quam, lobortis nec sapien eget, facilisis blandit sapien. Integer ornare felis eget orci consectetur vulputate. Ut efficitur fermentum lacus sed vulputate. </p>

<div class="wrap-div-topSpacer"></div>
<div class="wrap-div wrap-div-right"> DIV with content or Image in the Middle of the text </div>

The CSS

<style>
	div.wrap-div-topSpacer {
		width: 0px;
		height: 60px;
		float: left;
	}
	div.wrap-div {
		float: left;
		clear: both;
		margin: 0px 10px 0 0;
		height: 80px;
		width: 25%;
		text-align: center;
		background: #0088cc;
		color: #FFF;
	}
	div.wrap-div-right {
		float: right;
		width: 50%;
	}
</style>

Wrap text around a div or image using with the css is a Good working in all most latest browser.

Try Your Self Download