Example 5. Placing an image on a field with layers and CSS styles

The float:left property for the #pic layer is needed to set the image to be adjacent to the left edge of the document, and the top line of text to coincide with top line Images. Without this property, the #text layer drops down to the height of the image. Also, for the #text layer, specify the left margin margin-left:110px at a distance of 110 pixels, so that the text there does not overlap the image. If the image needs to be placed in the right margin, then specify float:right for #pic and margin-right:110px for #text.

P.S.: According to the HTML4 specification, images must be placed inside block elements such as div or p.

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. 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 .

Using the float property, you can align an image left (img (float: left; margin: 0 [x] [y] 0;)) or right (img (float: right; margin: 0 0 [x] [y]; )) edge of a web page or container block.

To prevent the picture from merging with the text, appropriate values ​​are added for it margin properties.

You can unwrap the next block of text or heading using the h2, p (clear: left;) or h2, p (clear: right;) construct.

You can also position the image in the center of the page img (display: block; margin: 0 auto;), or make text wrap around the image on both sides, wrapping each block of text in a separate paragraph.

HTML markup

List of towns in England

Amersham

Amersham is ....jpg">Buxton is ...

Chesterfield

Chesterfield is ....jpg">

It has ....jpg">Dartmouth is ...

CSS styles

Body ( margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*create a counter for any heading h2*/ ) h1 (font-family: "Lora", serif; color: #564C4A; font-weight: 300; ) h2 ( font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* cancel the wrapping on both sides */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* set the numbering of h2 headings to increase by one */ ) h2:before ( content: " " counter(h2) ". "; /* add at the beginning of each header the current counter value and a period with a space */ ) p ( font-family: arial; color: #785F5B; line-height: 1.3; ) /********** picture on the left ** ********/ .left ( float: left; margin: 0 1em 1em 0; ) /********** picture on the right **********/ .right ( float: right; margin: 0 0 1em 1em; ) /********* picture between text **********/ .columns ( float: left; max-width: 30 %; margin: 0; ) .img-center ( float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; ) /********* picture in the center********* */ .center ( display: block; margin: 0 auto 1.5%; )

Wrap around the image on both sides

The technique is that the text is placed in two blocks of the same width with a small gap in the middle. Using the pseudo-elements:before and:before, a placeholder is added to each block with a width of half the image and a height equal to the height of the image. The image is absolutely positioned in such a way that it covers these empty blocks, resulting in a wraparound effect on both sides.

HTML markup

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

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.

Formulation 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. Because search robot I have always respected the presence of pictures on the site, and 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. And I suggest universal option– if there is no image, 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.

Correct solution

To implement the task, we create two blocks: one for the picture, the second for the text. Taking into account the fact 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 meet 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 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 demands additional attention! In order for our old man to work normally, we add the float property to the text block (after accessing the overflow property definition fixed width not 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, then 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?

Wrapping text around a picture. You and I have already learned a lot. How to create a chart in Word, How to create beautiful frame in Word, How to draw a diagram in Word 2003, How to change page color in Word, and much more. Now I would like to know how to make text wrap around a picture?

For those who often work with text and graphics in Word, this is not a problem. But if you rarely do this, then you probably forgot how you can wrap text around a picture.

And so you write an article and insert a picture into it. But something doesn't suit you. The picture doesn't look right. It would be better if the text framed it. To begin, drop a picture onto the page and select it (click on it with the mouse). Then open the panel below Drawing select Text wrapping . What kind of dough wrapping to choose is up to you.

• Drawing in the text.
• Text around the frame.
• Text along the outline of the picture.
• Drawing behind the text.
• Drawing before text.
• Text above and below.
• End-to-end text wrapping.
• Change the flow path.

Choose what you like.

Word 2007/2010

Select the picture. Open menu Page layout and go to block Arrange .

Click on the small arrow on the button Text wrapping .