Task

Add an image to the page so that it wraps around the adjacent text.

Solution

Wrapping text around a picture is usually used to compactly arrange material and link illustrations and text together. The wrap itself is created using the float style property added to the IMG selector. The left value aligns the image to the left, right - to the right. In this case, the flow occurs along the other, free sides.

Example 1. Wrapping around pictures

HTML5 CSS 2.1 IE Cr Op Sa Fx

Report of Lieutenant Bokatuev

Yesterday, during a reconnaissance operation, our group was attacked by an unknown enemy in Alien camouflage uniform. As a result of effective defense and a swift counterattack, a large group of militants was crushed and thrown back. There are no casualties among personnel. The fighters of the reconnaissance group showed remarkable skills in using weapons. Particularly distinguished in battle was platoon leader M.A. Kudryashev, who wisely used the human resources of his platoon. As a result of the operation, elements of extraterrestrial culture were captured and transferred to the analytical group.

Press release from the analytical group

Psychotropic weapons were developed in our secret laboratories as part of Project Pandora. As a result of an unsuccessful experiment, most of the scientists who worked on the device were exposed to psychotropic radiation, and they, in a state of passion, took the prototype apart. Perhaps our scientists are still in a state of passion.

Result this example shown in Fig. 1.

Rice. 1. Text with illustrations

Using the float property forces the text to fit tightly to the image. Therefore, the example introduces a universal property margin , which adds padding between the image and the text. This property simultaneously sets the indentation on the top, right, bottom and left of photos.

IN Microsoft documents Word quite often there are various images. I’m sure that from time to time you have to dilute what is written by inserting pictures according to their meaning, because this way the information is perceived much better.

The site has various articles that will help you figure out how to properly work with an image inserted into Word. The added picture can be cropped, or the image can be rotated in Word to the required angle. If you come across the right or just a beautiful picture in a document, you can save the image to your computer.

This is what we will deal with in this article. In Word, text can flow around a picture not only from the side. It can be placed behind it, along the outline or around the frame. I have MS Word 2010 installed, but the screenshots taken will also be suitable for those who have 2007, 2013 or 2016 installed, except that the names of the items may differ slightly.

Add a picture to the document and double-click on it to open the tab "Working with drawings"– “Format”. Then, in the “Arrange” group, click on the button "Text Wrap". In the context menu that opens, select the appropriate option.

The desired menu can be opened in another way. Click right click mouse over the image and select "Text Wrap". After this, possible options will open again.

Let's take a closer look at all the available types of wrapping.

– placement of the written object around the frame. A frame appears if you click on the picture with the mouse - it is a rectangle with markers along the contour. That is, if the photo is of irregular shape, the text will still be printed in a rectangle.

– this wrapping is best used for objects free form, so that the words are placed along the outline and not along the frame.

“Through” – the flow will be around the frame. It is better to use when the object is not completely filled, but there are empty areas of some shape.

– even if the image is small in size, there will be nothing written to the right or left of it.

– the object will be placed behind the printed text. Please note that while the image is selected, there is a frame with markers along the contour; you can move and edit it. But as soon as you move on to editing or typing words, you will no longer be able to select the drawing, unless its borders extend beyond what is written, that is, into the margins on the right or left.

In order to make a picture a background in Word, just this type of wrapping is used. You can read more about this in the article by following the link.

“Before text” – the image will be placed on the text itself and will cover it.

– this item can be selected if the picture is irregular in shape, or you want the words on it to be partially written. In this case, a red outline with black markers will appear around the image. Move the handles to change the outline. You can add new markers by simply clicking on the red line in the desired place and moving the mouse cursor to another place.

Most often you have to print something right next to the picture, on the right or left side. Of all the described methods, flow is suitable for this. Select it for the image, then move the object to the desired part of the document, so that the text is located on the right side, as in the example, or on the left side.

If the distance from the text to the picture is not suitable, then you can change it and set values ​​that are more suitable.

To do this, right-click on the image and select from context menu "Text Wrap" – .

A separate “Markup” window will open. In the section "Distance from text" indicate the required values ​​in the fields on which sides the text is located from the image. Then click "OK".

For example, I increased this distance.

Experiment, see how the text will look to the right of the image, along its outline, etc. Choose the arrangement of the image and text in the document that suits you best.

Rate this article:

All HTML elements on a web page are arranged in a common flow, from top to bottom (for block elements) and from left to right (for inline elements). This display method is not very effective, but thanks to CSS it is possible to change the design for the better.

Floating elements

When you define a floated element, you need to position it in code directly below the element you want it to float under; all other content placed in code below the floated element will flow around it on the web page. Let's take a closer look at how browsers load floating elements and other content on a web page.

First, the browser loads elements onto the page in the normal order, moving from top to bottom, when it encounters a floating element, it places it on the specified side. The browser excludes this element from the general flow, and as a result it "floats" on the page.

Since the floating element was excluded from the general flow, the remaining block elements located in the code after it are loaded onto the page as if this element was not there. Note that block elements are placed below the floating element, this is because the floating element is no longer part of the overall flow.

If you look closely at the picture, you will see that unlike block elements, when placing inline elements or simple text located inside block element, the bounds of the floating element are respected, so inline elements and text flow around it.

Keep in mind that you can place multiple floating elements in one row if the width of the parent element allows it.

Note: Absolute and fixed positioned elements ignore the float property.

WITH using CSS float properties The image was made to float on the left side. The text located in the HTML code below the image will wrap around the image along the right and bottom sides.

Try »

To create empty space between a picture and the text that wraps around it, you need to add padding to the picture. Since the image is offset to the left border of the parent element, it will be enough to add padding only to the right and bottom to slightly move the text away from it:

Img ( float: left; margin: 0 10px 10px 0; ) Try »

Cancel Wrap

Sometimes you want to display an element so that it is not affected by floating elements in front of it. Such an element, for example, could be the footer, which in any case should be displayed under all other elements of the page. If your page has high side menu located on the left edge of the web page, the footer can rise up and appear to the right of it. So instead of being positioned on the page, the footer content will appear flush with the sidebar. This problem This is resolved by using the clear property, which tells the browser that the element being styled should not wrap around the floated element.

The CSS clear property can be set to one of the following values:

• left - floating elements are not allowed on the left side.
• right - floating elements are not allowed right side.
• both - floating elements are prohibited on both sides.
• none - allows floating elements on both sides.

Quite often, the layout designer is given certain non-standard tasks. Our goal is to offer the most rational and correct solution. Today we will talk about the features of text wrapping around an image.

Statement of the problem

Writing an article for your information resource or a blog will often be accompanied by interspersed images along the course of the presentation of the text. Since the search robot has always respected the presence of pictures on the site, the user will be more pleased with text with bright images. Hence the need to install a special formatting method that will ensure a beautiful interaction between text and pictures.

Let's consider the case when text wrapping is not required. Moreover, I offer a universal option - in the absence of a picture, the text is stretched across the entire width of the block (not all of your articles will be accompanied by illustrations). The width of the text block is not strictly fixed. Below is what our block should look like.

The right decision

To implement the task, we create two blocks: one for the image, the second for the text. Taking into account that there may be other elements under the image, we create a separate container for the image, otherwise this is not required, you can simply assign the required class to the image tag.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Text block

Display: inline; )

This is a standard solution for text that will wrap around a block with a picture. It will look like this:

It would be quite logical to suggest assigning the properties of a floating object to the text. If not set values width of the object we get the following picture

To avoid this effect, you simply need to specify the width of the text block, but this does not correspond to the conditions of our task.

The next good option would be to use the margin-left property. Since for a blog, most likely, all the pictures in this block will be unified in size, the solution is, in principle, not bad and effective. However, this is just a special case, since if there is no picture in the article, there will simply be an empty strip on the left. This doesn't suit us. We are looking for a universal solution!

And the most correct solution, as often happens, is the simplest. To achieve the desired formatting of a text block, you need to access the overflow property with the value hidden. Don't forget about the unique Internet Explorer. As usual, he shows off and requires extra attention! In order for our old man to work normally, we add the float property to the text block (after accessing the overflow property, defining a fixed width will not be required).

Thus, we have come to the correct solution, which will lead to the effect indicated in the picture in the subsection that described the conditions of our task.

Image ( float: left; /*wrap */ margin: 10px; /*external padding for beauty */ display: inline; /* for IE6, so that the left margin does not double */) . text( overflow: hidden; float: left; )

Disadvantages of the method and alternative

Despite the simplicity and versatility of the method, which consists in using overflow:hidden, there is one drawback. The property will no longer perform its functions if drop-down elements are used in the text part.

In this case, you will need an alternative to configure the desired formatting. This technique will be based on the functionality of the combination display:table-cell;. This solution is just as effective, but slightly inferior in simplicity to the first method. When calling this method, you also need to set the layout to work in the Internet Explorer environment

Img ( float: left; /* set the wrapping */ margin: 10px; /* indentation for beauty */ display: inline; /* for IE6, so that the left margin does not double */) . text( display: table-cell; zoom: 1 ; /* Carefully! The string is invalid */ }

And this solution has its own characteristics that need to be taken into account during layout. If the text part is short enough, the next block will be displayed to the right of the block with the text class. To avoid this, you need to enclose the text block and the image in a separate container.

What browsers does it work in?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

Lay out a block consisting of a picture and text, and the text should not flow around the picture.

Left is correct, right is not

Additional condition: the width of neither the text nor the image is strictly defined. If there is no image, the text occupies the entire allocated width.

Solution

Let's try to write styles. Everything is clear with the left column:

Photo ( float: left; /* set the wrapping */ margin:10px; /* indentation for beauty */ display:inline; /* for IE6, so that the left indentation does not double */ )

Now the drawing is on the left, and the text goes around it on the right. But if there is more text, it will “dive” under the drawing (see picture above), and we don’t need this.

The first thing that comes to mind is to “float” the text. But in this case, if you do not specify the width, the text will fall under the picture!

float:left/right will require width - otherwise nothing will work!

We think further... Good decision may seem.description( : XXXpx). Indeed, in some situations this option works. For example, if the image size is still set. Let's say it's a rubber news block. The image cannot be wider, say 200px, but the text already stretches and occupies the entire remaining width.

However, this option has significant drawback. If there is no block with a picture, the indentation will still remain an awkward hole. Of course, you can remove it using the sister element selector, as described in the article, but in our case there is another solution.

You can prevent wrapping by simply adding :hidden; for a text column. Thus we will establish for her new context formatting (this topic will be covered in more detail soon).

The only browser that will react to this incorrectly is, of course, IE6. We set the column specifically for it, for example, “float” (you don’t need to set the width).

So, the solution to the problem looks like this:

Photo ( float: left; /* set the float */ margin:10px; /* indentation for beauty */ display:inline; /* for IE6, so that the left indentation does not double */ ) .description( overflow:hidden; ) * html .description( float:left; )

As always, in combat conditions we use .