Placement of photo in the page
I would like to put some photos on my page, say in the middle top to bottom and center them. I was able to do it. It looks good.
I would like to put some photos on my page, say in the middle top to bottom and center them. I was able to do it. It looks good.
Why don’t  you use a table tag <TABLE> to layout your page other than using division tags <DIV>?
You have to create a two column table. Left column for links and other column for images. You can keep your links in a another table also.
 www.abc.com www.abc1.com www.abc2.com |
                                                                             <image>                                  |
Â
So the code would be like this:
<html>
<body>
                       <table width="100%">
                                   <tr>
                                               <td width="25%">
                                                           <a href="">link 1</a></br>
                                                           <a href="">link 2</a></br>
                                                           <a href="">link 3</a></br>
                                                           <a href="">link 4</a></br>
                                                           <a href="">link 5</a></br>
                                                           <a href="">link 6</a></br>
                                               </td>
                                               <td align="center">
                                                           <img src="button.jpg"></img>                                               Â
                                               </td>
                                   </tr>
                       </table>
           </body>
</html>
If you really want a division <DIV>, Â to do then you have to use a style attribute.
style="float: left"
You can get a clear idea about float style attribute from the https://www.w3schools.com/Css/css_float.asp
The float property defines whether or not an element should float.
Fact:Â Position: Absolute elements ignore the float property
left     :  Element floats left
right    :  Element floats right
none   :  The element not float
             Displayed where it occurs in the text. (This is default)
inherit : Â Value that specified of the float property which should be inherited from the parent item.
So the code would go like this:
<html>
<body>
                       <div style="float: left">
                                   <a href="">link 1</a></br>
                                   <a href="">link 2</a></br>
                                   <a href="">link 3</a></br>
                                   <a href="">link 4</a></br>
                                   <a href="">link 5</a></br>
                                   <a href="">link 6</a></br>
                       </div>Â
                       <div align="center" >
                                   <img src="button.jpg"></img>
                       </div>
           </body>
</html>
I prefer to use a table to layout a page. It is easy and controllable.
When you use a division tag <DIV>, Â you have to have a better idea about the style attribute. Â All these layouting part are done by the style tag when you use a division tag.
style="position : "
style="margin : " ………etc.
Style Property Groups for layouting.
   * Background and Dimension
   * Border and outline
   * Font and Text
   * Generated content
   * Margin and Padding  Â
   * Positioning
   * Print
   * Table and List Â
You must be familiar with these property groups so that you will not get into a trouble like this again.
I recommend  to use the w3school site for your reference when you face a problem with HTML stuff.  It helps me a lot.
But there are both pros and cons when comparing the use of division tags and table tags. You can choose either way which you prefer. Â Last several years, people have been moved towards the division based structure from the table based structure. So the decision is yours.
You can get a suitable decision after looking at this article. This will help you get a better decision.
https://coding.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/
I found this more valuable. I think you will find it too.
Most experts move into the division based layout structure. As a novice, I would like to use a table layout mechanism. Try both of them and find out what's your choice.