Using <div> for positioning, my own discovery......

While I am studying web page design and trying to improve my own coding style, I discovered something unusual to me. By using <div> and <span> tags we can display our design better compared by just using tables (using the <table> tag to create the design or face of a page). At first, I encountered problems on my positioning, when resizing the browser, the position of my element seemed to be interrupted. The real position when the browser fits the screen does not retain by resizing the browser, but this problem was then later solved because of researching on the net.

This is what I discovered so that an element would not be disrupted when the browser is re-sized:

For example we are using <div> as an element to display the word Home | Profile | Gallery on the browser with its specific position in pixels enclosed in a table, the right coding would be:

<center>
    <table height="600" width="600" border="2">
         <tr>
           <td>
             <div style="position: absolute; top: 200px;">
               <div style="position: absolute; left: 10px; width: 400px;">
                 <b>Home | Profile | Gallery</b>
               </div>
             </div>
           </td>
         </tr>
    </table>
</center>

In this way, the first <div> element specifies the top position of the content of our element, the word "Home | Profile | Gallery" that is in boldface. The second <div> element should be just for the left position of our content. Therefore, the first <div> element controls the position of the second <div> element since we nested the second <div> element to the first <div> element. For me, the first <div> tag is the main <div> tag. If in case, you tried to indicate the left position to the first <div> element, when you resize he browser, there would be differences on the result.

Copy this simple codes and see for your self...

That's what I discovered!...