Beginner, div/css problems [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have amended my code with the help from below but now
the images and text seem 'all over the place'. Some
behind the div background some infont, and the same
with the text as well as some text on the left,
some on the right.
I've taken screen shot to show, and
added requested html output below.
How it should look. http://i.stack.imgur.com/8O9uM.png
How it currently looks. http://i.stack.imgur.com/4GUfi.png
------------------------------
html output as requested
<div class="ind">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</h3></div></div></div>
------------------------------
php code
echo '<div class="ind">';
echo "<a href='127.0.0.1/forsale/".$row['AGENT_REF']."' class='left'><img src='127.0.0.1/vebra/assets/".$row['MEDIA_IMAGE_02']."' width='296px'></a><br />"; // home image and link
echo '<h3>';
echo $row['TOWN'];
echo '</h3>';
echo '<p class="area">';
echo $row['PRICE'] . " Bedroom property in ". $row['POSTCODE1'];
echo '</p>';
echo '<div class="bottom">';
echo '<div class="des">';
echo '<p>' .htmlentities(substr($row['SUMMARY'],0,120)).".....".'</p>'; // shorten description
echo '<ul id="info">'; // price bed postcode
echo "<li><img src='127.0.0.1/vebra/assets/icons/money_icon.png'><span>"."£" . $row['PROP_SUB_ID']."</span></li>";
echo "<li><img src='127.0.0.1/vebra/assets/icons/bed_icon.png'><span>". $row['PRICE'] . " Bedrooms"."</span></li>";
echo "<li><img src='127.0.0.1/vebra/assets/icons/area_icon.png'><span>". $row['POSTCODE1']."</span></li>";
echo '</ul>';
echo '<h3>' . "<br>" . "<br>";
echo "<a href='127.0.0.1/forsale/".$row['AGENT_REF']."'>View Property Details</a>";
echo '</h3>';
echo '</div>';
echo '</div>';
echo '</div>';
------------------------------
css code
/* Sales Results nb overflow:scroll; */
li img { width: 20px; }
.left {
float: left;
margin-right: 10px;
}
#sale_results { }
#sale_results .sale_content { background-color: #fff; padding: 20px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; }
#sale_results .sale_content h2.pagetitle { font-size: 38px; line-height: 41px; margin: 0 0 3px 0; color: #C4DA4B; font-weight: bold; }
#sale_results .sale_content p.subtitle { font-size: 20px; line-height: 22px; margin: 0 0 20px 0; color: #9B9EA0; }
#sale_results .sale_content .ind { height: 221px; position: relative; border: 1px solid #dedede; width: 922px; margin: 0 20px 20px 0; background: #fff url(images/sub_page_bg.png) repeat-x bottom; }
#sale_results .sale_content .ind > img {width: 295px;}
#sale_results .sale_content .ind.last { margin: 0 0 20px 0; }
#sale_results .sale_content .ind .bottom { float:right; clear: left; padding: 19px 15px 15px; width: 588px; height:188px;}
#sale_results .sale_content .ind h3 { font-size: 20px; line-height: 22px; color: #575B5C; margin: 0 0 7px 0; font-weight: bold; }
#sale_results .sale_content .ind h3 a { color: #575B5C; }
#sale_results .sale_content .ind h3 a:hover { color: #333; }
#sale_results .sale_content .ind p.area { font-size: 14px; color: #9B9EA0; line-height: 16px; margin: 0 0 15px 0; }
#sale_results .sale_content .ind des { font-size: 12px; color: #9B9EA0; line-height: 16px; margin: 0 0 15px 0; }
#sale_results .sale_content ul#info { padding: 0; margin: 0; float: left; position: absolute; bottom: 61px;}
#sale_results .sale_content ul#info li { margin: 0 0 10px 0; float: left; width: 130px; padding:0; background: none; }
#sale_results .sale_content ul#info li img { float: left; width: 24px; height: 24px; margin: 0 10px 0 0; }
#sale_results .sale_content ul#info li span { font-size: 14px; font-weight: bold; color: #3B3E40; line-height: 24px; float: left; }
#sale_results .sale_content .ind a.view { background: url(images/view_more.png) no-repeat; position: absolute; bottom: 0; height: 39px; width: 265px; background-position: 0 0; font-size: 0px; line-height: 0px; text-indent: -9999px; border: none; cursor: pointer; float: left; margin: 15px 0; }
#sale_results .sale_content .ind a.view:hover { background: url(images/view_more.png) no-repeat; height: 39px; width: 265px; background-position: 0 -39px; }
-------------------
Previous Post Below
The PHP is getting the info fine from the database
but I cannot get the text to the right of
the image, it shows low diagonal right
below where it should be.
------------------
- pic text -
- left right -
------------------
- text
- showing
- here
Maybe someone with fresh eyes can see something i'm not

Answer 1

Try styling your image with float: left; and your text with float: right;

Answer 2

If you are talking about the image at the top, then a simple float: left; would do the trick.
So add a class to the image or its anchor, for example class="left":
echo "<a class="left" href='127.0.0.1/forsale/?sale=".$row['AGENT_REF']."'><img src='127.0.0.1/vebra/assets/".$row['MEDIA_IMAGE_02']."' width='296px'></a><br />"; // home image and link
And then float it in your css:
.left {
float: left;
}
Here a jsfiddle of what I imagine you are trying to accomplish.

Answer 3

try to remove float:left from this line:
#sale_results .sale_content ul#info li span { font-size: 14px; font-weight: bold; color: #3B3E40; line-height: 24px; float: left; }