How to wrap text around a picture? How to create html text wrapping around an image

Last update: 21.04.2016

Typically, all blocks and elements on a web page appear in the browser in the order in which they are defined in html code. However, CSS provides special float property, which allows you to set the wrapping of elements, thanks to which we can create more interesting and varied web pages in their design.

This property can take one of the following values:

left: The element moves to the left, and all content that goes below it wraps around the right edge of the element

right: element moves to the right

none: cancels the wrap and returns the object to its normal position

When using the float property on elements other than the img element to be styled, it is recommended to set the width property.

So, imagine that we need to display an image on the page to the left of the main text, a sidebar should be on the right, and the rest of the space should be occupied by the main text of the article. Let's first define the page interface without the float property:

L. Tolstoy. War and Peace. Volume two. Part three

The old oak tree, completely transformed, spread out like a tent of lush, dark greenery, swayed slightly, swaying slightly in the rays of the evening sun...

“No, life is not over at the age of 31,” Prince Andrei suddenly finally and irrevocably decided...

IN in this case we will get the sequential placement of elements on the page:

Now on the same page we will apply the float property, changing the styles as follows:

Image ( float:left; /* float left */ margin:10px; margin-top:0px; ) .sidebar( border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin- left:10px; font-size: 20px; float: right; /* float right */ )

The placement of elements on the page will change accordingly:

Elements to which the float property is applied are also called floating elements.

No flow around. clear property

Sometimes it becomes necessary to prohibit flows. A similar task may be relevant if some block must be moved down to new line rather than wrapping around the floating element. For example, the footer, as a rule, should be located strictly at the bottom and stretch across the entire width of the page. If there is a floating element in front of the footer, then the footer may flow around this element, which is not desirable.

To prevent elements from wrapping in CSS, use clear property, which tells the browser that no wrapping should be applied to the element being styled.

The clear property can take the following values:

left: The styled element can wrap around the floated element to the right. On the left the flow does not work

right: The styled element can only float to the left of the floated element. And on the right the flow doesn't work

both: the styled element can wrap around floating elements and moves down relative to them

none: the element being styled behaves in a standard way, that is, it takes part in the flow around the right and left

For example, let's say a footer is defined on a web page:

The presence of a wrap will create an incorrect display in which the footer moves upward:

Let's change the footer style:

Footer( border-top: 1px solid #ccc; clear: both; )

Now the footer will not flow around the image, but will go down.

Task

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

Solution

Wrapping text around a picture is usually used to compactly arrange material and link illustrations and text together. The float 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 failed experiment Most of the scientists who worked on the device were exposed to psychotropic radiation, and they, being 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.

Having images on web pages improves them appearance, attracts attention and also contributes to better perception of texts. Wrap around the picture html text allows you to connect content with illustrations and rationally place the material. New ways of creating images are constantly being developed to bring to life creative ideas. At the same time, new styles of layouts are based on the same methods, creating limitless scope for imagination.

Positioning of images relative to text can be done in html or using CSS properties.

HTML tags: text wrapping around an image

Pictures are arranged on the page in three ways:

• central position;
• text wrapping;
• insert into the field.

At large size the picture is placed in the middle of the page, first placed in a container< p > img tag, after which the align="center" attribute is set for it. If you use an image frequently, you should apply CSS styling to the tag< p >.

When the image is small, text is placed next to it. The method is the most common. Text wrapping is done in several ways. But first the picture needs to be displayed on the screen. If the path to it is known, for example, "foto1.jpg", it is inserted into html page using the following entry:

< p>< img src =" foto1.jpg ">< /p>

The example corresponds to the case when html files and pictures are in the same folder.

If the image is followed by text, it will appear below. This is not always convenient, since there will be empty seats Therefore, the page is designed in such a way as to create a wrapping of html text around the image. To do this, the img tag has an align attribute, which specifies the location of the photo or drawing relative to the text. This parameter determines which edge of the page the graphic material is located on and how the text flows around it.

The attribute can be set to the following values:

• left - moving the image to the left when text flows around on the right;
• right - wraps the image on the left when it is placed on the right;
• bottom - default value, when the picture is located on the left, the first line of text begins at the level of its bottom;
• top - the image is placed similarly to the previous value, but the first line is located at its top level;
• middle - the initial line of text runs opposite the middle of the image.

The img tag has parameters that can be used to set the distance from the text to the image (hspace and vspace). Without their use, the text will be located close to the image. In addition, they select dimensions drawing width and height. In this case, the proportion between width and height must be observed. If you do not specify the dimensions, by default the picture is transferred with the dimensions of the source, which is not always convenient.

Moving an image to the left with text wrapping around it can be done by writing:

< p>< img src =" foto1.jpg " align="left" width=150 height=100 hspace=5 vspace=5>Text< /p>

Using tables

Wrapping html text around a picture is easy to do using a table with an image inside a cell. Here the align property is applied to the table tag. Tables have more controlled parameters, which creates advantages for them:

< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= "foto2.jpg" width=150 height=100>

< /table >

The table border is made invisible and prevents text from getting closer to the image. The spaces between and inside cells can be adjusted.

Using Styles

From the previous examples you can see how easy it is to wrap html text around an image. CSS allows you to achieve similar results. Wrapping is created using the float property. Here, too, alignment is provided by the left and right values.

To do this, create a class and assign CSS styles to it:

margin: 5px 12px 3px 0px;

The float style property is then added to the img selector:

< img src= "foto1.jpg" class="fotoleft" >

In addition to aligning the image using the left value, here you can also set the indentation of the text from the image margin property. Text wraps on the left in the same way if you apply the right property.

Styles allow you to overlay text directly onto an image. To do this, the text is inserted into a block with translucent background, which is superimposed on the picture.

Effectively wrapping text and overlaying it on images is not so difficult, since this is achieved through consistent experimentation.

Wrap round images with html text

Web pages consist primarily of rectangular areas. Everyone knows how to wrap text around an image in HTML. Styles are used to create geometric shapes, but they are not related to laying content inside or outside elements. You can divide the drawing into 2 parts and place indent blocks of different widths on both sides. There is text immediately behind them.

The process of creating such a wrap is labor-intensive, and it must be done separately for each new drawing.

Wrap text around complex shapes

By developing the new CSS Shapes specification, we were able to influence existing design and provide him with new perspectives. Content can now wrap around complex shapes and curved areas.

Specification supported Chrome browser Canary, and are now trying to implement it on the rest. It allows you to create complex designs without the help of graphics editors.

Flow around round pictures html text is provided using the following entry:

shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */

< p>Example text< /p>

The code creates a circle that is perfectly wrapped around the text.

Any irregular shape will be created in the same way, thanks to the support of Photoshop, which will allow you to get the CSS code of the shape.

Conclusion

When building page layouts using different ways By placing images and text on them, you can create a unique design. To do this, you need to master the basic layout rules that ensure html text wraps around the image.

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 a 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. By doing this, we will set a new formatting context for it (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 .

In this article we will look at options for wrapping text around a picture. There are several ways. Let's look at each of them. To get started, I advise you to read the article html tag to have basic knowledge of images on html pages.

1. Wrapping with Tag Styles

The picture can be straightened only by operating with CSS styles tag . As you know, the tag syntax allows you to set the image alignment in attributes:

where VALUE can take values

• left - left alignment
• right - right alignment
• bottom - alignment to the first line of text (this is the default)
• top - alignment by top line text
• middle - alignment to the base line of text

For example

Text text text text text text text text text text text text

The picture seems to have stuck together with the text, so we’ll make some indents. Moreover, there are two options for how this can be done.

Option 1.1. Via CSS property - hspace and vspace
To do this, in the tag attributes add two values:

This is what it will look like on the page:

The hspace attribute specifies the horizontal padding in pixels, vspace – the vertical padding, respectively.

Option 1.2. Through the CSS property - padding and margin
To do this, in the tag attributes add two values:

This is what it will look like on the page:

It looks better due to the fact that we did not indent on the left. Instead of margin, you can use padding, the effect will be similar.

Using the float property instead of align

Besides align properties in tag attributes there are styles CSS property float , which is also responsible for alignment. The syntax is as follows:

float :right; // Right alignment float:left; // Left alignment

For example, if you write the picture output in the previous example as follows:

Then it transforms into the following.