CODEWITHSUNDEEP
phphtmlcss
user2899094
user2899094

Reputation: 491

why are my divs showing in wrong place

I am showing 5 results on a html page using divs and absolute position. I have used display:table-cell; and display:flex; for center positioning of image and text.

What i have problem is with for some reason after creating a parent div for each result, giving it a border, for some reason eben though i use absolute position there seems to be some uniform space between results. I see the borders in the right place, but the result contents are shown out of place.

See here: https://www.dropbox.com/s/deeycdr32ejcftd/proferror.jpg?dl=0

Something is spacing out the results wringly. When I take out the parent container labelled profile[1 to 6] then it does work.

heres the php which is echoing the HTML:

echo "<div id='results' style='position:absolute;left:0px;top:0px;'>"
(while loop)
   echo "<div id='profile".$profileid."' style='border-style: solid;position:absolute;left:0px;top:".$yy."px;width:320px;height:50px;'>";
   echo "<div id='pic".$profileid."' style='display:table-cell; vertical-align:middle; text-align:center;background-color: #434345;position:absolute;left:0px;top:".$yy."px;width:50px;height:50px;overflow: hidden;'>";
   echo "<a href='http://rafnet.co.uk/click/php/requests.php?from=".$username."&to=".$row["username"]."'><img style='max-height: 100%;' src='http://rafnet.co.uk/click/images/".$row["image"]."' /></a></div>";
   echo "<div style='color:#0d00ff;display:flex; align-items: center; justify-content: center;position:absolute;left:50px;top:".$yy."px;width:270px;height:30px;overflow: hidden;'>".$name."</div>";   
   echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";

   $yy+=60;$profileid+=1;
(end of while loop)
echo "</div>"

Upvotes: 0

Views: 470

Answers (2)

user2899094
user2899094

Reputation: 491

I managed to fix this issue. What I realised after some work was that all the divs inside the parent div "profile" were being positioned relative to its position.

so for those divs i changed

top:".$yy."px;

to 

top:0px;

ref to css are you saying i shoudlnt use the style attribute to define things? Are you saying i should place the css in the head section and assign them using the id or class? I just using the style attribute as i can see without referencing to what element it applies to

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";

Try taking away the second </div> at the end of this line

Upvotes: 2

Related Questions