After making changes to my code based on the suggestions below, the layout of the images and text appears to be all over the place. Some elements are behind the div background while others are in front. Additionally, some text is positioned to the left while some is on the right.
I have captured screenshots to illustrate the issue and provided the requested HTML output below:
Desired look: https://i.sstatic.net/8O9uM.png
Current appearance: https://i.sstatic.net/4GUfi.png
------------------------------
HTML Output:
<div class="ind"><a href='127.0.0.1/forsale/105322_24718166' class='left'><img src='http://127.0.0.1/vebra/assets/105322_24718166_IMG_00.jpg' width='296px'></a><br /><h3>Wrexham</h3><p class="area">2 Bedroom property in LL11</p><div class="bottom"><div class="des"><p>Situated close to Wrexham town centre, this two bedroom mid terrace has gas central heating and double glazing and provi.....</p><ul id="info"><li><img src='127.0.0.1/vebra/assets/icons/money_icon.png'><span>£105000</span></li><li><img src='127.0.0.1/vebra/assets/icons/bed_icon.png'><span>2 Bedrooms</span></li><li><img src='127.0.0.1/vebra/assets/icons/area_icon.png'><span>LL11</span></li></ul><h3><br><br><a href='127.0.0.1/forsale/105322_24718166'>View Property Details</a></h3></div></div></div>
------------------------------
PHP Code:
// PHP code here....
------------------------------
CSS Code:
/* CSS styles here.... */
-------------------
Previous Post Below
The PHP script successfully retrieves data from the database, but I'm facing difficulty in aligning the text next to the image as shown in the diagram below:
------------------
- pic text -
- left right -
------------------
- text
- showing
- here
If someone with a fresh perspective could review the code, it would be greatly appreciated.