php echo html - margin-left is not working

Question

Well, in a .php file I echo some html (like a template) for every result (from search input):

while ($row = mysqli_fetch_array($result))
{
  //image
  echo "<img id=" . '"' . "myImg" . '"' . "src=" . '"' . "showImage.php?image=" . $row['shortcutImage'] . '"' . "class=" . '"' . "imageList" .'"' . ">";
  //title
  echo "<h5 class=" . '"' ."titleResult" . '"' . ">".  $row['name_now'] . "</h5>";
  //area
  echo "<p class=" . '"'. "areaResult" . '"' . ">" . "Περιοχή: " . $row['area'] . "</p>";

  //break between results
  echo "<br>";
  echo "<br>";
}

and the style

imageList is for image
titleResult is for the <h5>
areaResult for <p>

    .imageList{
            margin-top: 10px;
            clear: both;
            width:100%;
            max-width:250px;
            float: left;
        }
        .titleResult{
            color: rgb(17, 17, 17);
            font-weight: 500;
            margin-left: 35px;
            margin-top: 20px;
        }
        .areaResult{
            margin-top: 35px;
        }

and of course the output I have: (Images names and area is tests)

Alexander van Oostenrijk · Accepted Answer · 2018-08-02 14:55:53Z

1

The margin-left you specify for your h5 element is not taken from the right edge of the image, but from the edge of the viewport (or whatever element these elements are in). If you want the margin to be from the edge of the image, you'll have to add the image width of 250px to it. This happens because you have made your img a floating element.

It would be wise to place each set of image, header and area text in a div so you can do your margin measurements from that context. That way, you can also get rid of the br elements used for vertical spacing and use CSS instead.

For instance, you could do:

<div style="padding-left:280px; padding-bottom: 40px">
  <img src="..." style="float:left">
  <h5>Title</h5>
  <p>Area</p>
</div>

edited Aug 2, 2018 at 14:55

answered Aug 2, 2018 at 14:49

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JexSrs Over a year ago

Thanks, your solution is what I want!

Collectives™ on Stack Overflow

php echo html - margin-left is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related