Placement of photo in the page
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.
