Go to Picture Format or Shape Format and select Arrange > Wrap Text. If the window is wide enough, Word displays Wrap Text directly on the Picture Format tab. Choose the wrapping options that you want to apply. For example, In Line with Text, Top and Bottom, and Behind Text.
Use display: inline-block and vertical-align: top to Place the Text Next to an Image in HTML. We can use the display and vertical-align properties to place a text next to an image in HTML. The display defines how an element displays in HTML.
The ALIGN attribute is an optional attribute to the IMG tag. It defines image placement relative to browser margins and text. ALIGN = "right" places the image on the right border of the browser window.
you have to float
your image container as follows:
HTML
<div id="container">
<div id="floated">...some other random text</div>
...
some random text
...
</div>
CSS
#container{
width: 400px;
background: yellow;
}
#floated{
float: left;
width: 150px;
background: red;
}
FIDDLE
http://jsfiddle.net/kYDgL/
With CSS Shapes you can go one step further than just float text around a rectangular image.
You can actually wrap text such that it takes the shape of the edge of the image or polygon that you are wrapping it around.
.oval {
width: 400px;
height: 250px;
color: #111;
border-radius: 50%;
text-align: center;
font-size: 90px;
float: left;
shape-outside: ellipse();
padding: 10px;
background-color: MediumPurple;
background-clip: content-box;
}
span {
padding-top: 70px;
display: inline-block;
}
<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Also, here is a good list apart article on CSS Shapes
Addition to BeNdErR's answer:
The "other TEXT" element should have float:none
, like:
<div style="width:100%;">
<div style="float:left;width:30%; background:red;">...something something something random text</div>
<div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
If the image size is variable or the design is responsive, in addition to wrapping the text, you can set a min width for the paragraph to avoid it to become too narrow.
Give an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.
#container:before {
content: ' ';
display: table;
width: 10em; /* Min width required */
}
#floated{
float: left;
width: 150px;
background: red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With