Organize your business online with a professionally designed website tailored specifically to your goals and personality. We provide web and graphic services including custom website design, search engine optimization, ecommerce, corporate identity and consulting for all your internet needs

Text floating and spacing around images

Well, these are the basics of HTML and CSS. We will remind you how to make a text float around the images and make margins around them. The first option is to use an HTML+CSS code to do this. It always looks nicer when you see a picture which is wrapped by text with some margins around it.

In order to do this, use the following code:

<img src=”images/your_image.jpg” 
   alt=”Image_description_in_case_you_the_image_is_not_loaded” 
   title=”Image_title” 
   align=”left”
   width=”300px”
   height=”200px”
   style=”margin: 4px 6px 4px 0” 
/>

In case you need to place a picture on the right side change the option align:

align=”right” <!-- instead !-->  of align=”left”

To indent the text from the edges of the picture in this case use the css-style:

style=”margin: 4px 6px 4px 0”

The offset parameter margin is specified in a clockwise direction, starting with the indent image above (4px), then the right margin (6px), the bottom margin (4px) and zero – left margin.

You also can specify the margins for all pictures on your page by using a CSS-style sheet. It could be done in several ways:

<div class=”intro”>
   <p> Some text goes here  
      <img src=”images/your_image.jpg” 
          alt=”Image_description_in_case_you_the_image_is_not_loaded” 
          title=”Image_title” 
          align=”left” 
          width=”300px” 
          height=”200px” 
      /> 
   Some text goes here </p>
   <p> Some text goes here 
      <img src=”images/your_image_2.jpg” 
         alt=”Image_description_in_case_you_the_image_is_not_loaded” 
         title=”Image_title” 
         align=”left” 
         width=”300px” 
         height=”200px” 
      /> 
    Some text goes here </p> 
</div>

In this example we use div layer intro for all images and text in the block. To make it work, use the following CSS style:

.intro img { margin: 4px 6px 4px 0;}

You also can specify the image-class:

<img class=”indent_1” 
   src=”images/your_image.jpg” 
   alt=”Image_description_in_case_you_the_image_is_not_loaded” 
   title=”Image_title” 
   align=”left” 
   width=”300px” 
   height=”200px” 
/>

and include the following CSS code to the CSS file:

.indent1 {margin: 4px 6px 4px 0;}

This option gives you an opportunity to control image margins specifically for all images which are in the same image class.