How to design website without table tag

How to design website without table tag - If you had ever make a website and used table tag to specify the location for put the image in, Have you ever thought if you don't use table how can you define and manage the location of the image in the website.

Let's start
Start from the simply. You have already known the tag div. Now make it makes the usefulness. The nature of div is the second div will be placed under the first div. See the example.



In the display page, the div of "Test2" will be placed under "Test1". If you want "Test2" located next to "Test1", you can do it by use css. Define the property of class to float and the value to left or right. Let's see the example.

In this picture has flower, bee and text. First, you have to know the position of the picture. Then divide the picture to 3 parts. See the picture below.



After that make the style sheet and html. This is the code.



For this example, I divided the picture 2 columns and defined 2 div on the left and the right.
In the right column, I divided again to 2 section (B and C) then make the style sheet for define the right column float next to Section A. In source code , I defined class left for the left div for making the right div float next to the left div. Then define the padding for make the position of the image. You can see from example source code in the section of style sheet.

These are the pictures that I have used for the example. You can save them for trying.