Question

My PHP grabs data from MySQL and display’s it in a container div in my index.php with no problem. However, the data is displayed one after another (different rows) rather than using the space available in the same row.

Here’s the index.php snippet of the div used as an overall container in the body tags. The second div is for an infinite scroll feature that loads more data when the user reaches the end of the screen.

<div id="postedComments">

<?php require_once 'jquery-masterLoader.php' ;  ?>

</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field            </center>
</div>

Here’s the PHP jquery-masterLoader.php it’s one of the two PHP files that govern the loading script. The other one wouldn’t be necessary for show and tell since it’s only called upon when the user reaches the end of the screen.

<?php
if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) {
header("Location: index.php");
die("Denny access");
}
    error_reporting(0) ;
    set_exception_handler('exception_handler') ;
    $config = parse_ini_file("core/config/my.ini") ;
    $db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,                 
    $config['dbName']);
    if(mysqli_connect_error()) {
     throw new Exception("<b>Could not connect to database</b>") ;
    }
    if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT          
    0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
    }

    while ($data = $result->fetch_object()) {
    $id = $data->id;
    $name = $data->Name ;
    $continent = $data->Continent;
    $population = $data->Population ;
    echo "
    <div class='postedComment' style=\"width: 33%; \ list-style: ; \ float: left;\" id=\"$data-                 
    >id \">

    <b>Country : </b>$name <br /> 
    <b>Continent : </b>$continent<br/>
    <b>Population : </b>$population 
    <i style=\"font-size:small;color:blue\">Index : $id</i>
    <hr /> 

    </div> 
    " ;

    } 
    /* close connection */
    $db->close();
    function exception_handler($exception) {
      echo "Exception cached : " , $exception->getMessage(), "";
    }

Sorry for having style mixed in with PHP, it’s a work in progress.

Here’s the CSS rules

#postedComments {
width: 100%;
display: ;

}

html, body { 
height: ; 
width: 100%; 
margin: 0; 
padding: 0;
}

#body {
width: 60%; 
margin: 1% auto;
}

 /* Resets */

ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}

h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}

p {
padding:0;
margin:0 0 20px 0;
}

a:link, a:visited {
text-decoration:underline;
color:#000;
}

a:hover {
text-decoration:none;
}

ul li {
padding:5px 0;
}

ul li input[type="text"], ul li input[type="password"] {
width:200px;
}

Also here’s the JavaScript calling upon the scripts.
(custom_jquery-debug.js)

 $(document).ready(function() { 
 $("#postedComments").append( "<p id='last'></p>" );
 //$("#postedComments").append( "<div id='last'></div>" );
console.log("Document Ready ------------------------");
if ($("#last").length){ 
position = $("#last").offset() ; 
console.log("Initialization of last_DIV succeeded and it's values are ....Top-value           
is :"+Math.floor(position.top) + " ---- Left-value is : "+ Math.floor(position.left ))      
;   

}
doMouseWheel = 1 ;   
$(window).scroll(function() {
if (!doMouseWheel)  {
return ;
} ;
 var distanceTop = $('#last').offset().top - $(window).height();
     console.log("Mouse scroll , and The DIV  last has an offset-top value of :"+      
Math.floor($("#last").offset().top)+"----Window height is     
:"+Math.floor($(window).height())+"---- Last's offset minus window height is :     
"+Math.floor(distanceTop)) ;  
if  ($(window).scrollTop() > distanceTop){
console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>") ;
console.log("Show Div loadMoreComments and Class .postedComments.last has the id of  :     
"+$(".postedComment:last").attr('id')); 
 doMouseWheel = 0 ; 
$('div#loadMoreComments').show();
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+     
$(".postedComment:last").attr('id') ,   
success: function(html) {
 doMouseWheel = 1 ; 
if(html){
$("#postedComments").append(html);
console.log("Append html , sumarize .... first id has nr : "     
+$(".postedComment:first").attr('id')+ " --- last id has nr :"     
+$(".postedComment:last").attr('id'));
position = $("#last").offset() ; 
console.log("New values of last_DIV  from IF_html are , Top 
:"+Math.floor(position.top )+" --- left :"+Math.floor(position.left)) ; 
$("#last").remove();
if ($("#last").length == 0 ){ console.log(">>>>>>>>>>>>>>>The last_DIV is removed     
from stage>>>>>>>>>>") ; }
$("#postedComments").append( "<p id='last'></p>" );
if ($("#last").length  ){ 
position = $("#last").offset() ; 
console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :" 
+ Math.floor(position.top) +"  ---- Left :" + Math.floor(position.left )) ; 
}   
$('div#loadMoreComments').hide();
}else{  
console.log("LoadMoreComments is replaced with a custom message") ; 
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of    
countries !!!!!!!</h1></center>");
}
}
});
}
});
});

Second JS script (custom_jquery.js)

 $(document).ready(function() { 
  $("#postedComments").append( "<p id='last'></p>" );
 //console.log("Document Ready");
doMouseWheel = 1 ;   
 $(window).scroll(function() {
 //console.log("Window Scroll ----");

 if (!doMouseWheel)  {
 return ;
 } ;
  var distanceTop = $('#last').offset().top - $(window).height();   
if  ($(window).scrollTop() > distanceTop){
 //console.log("Window distanceTop to scrollTop Start");
  doMouseWheel = 0 ; 
$('div#loadMoreComments').show();
    //console.log("Another window to the end !!!!       
 "+$(".postedComment:last").attr('id'));    
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+ 
 $(".postedComment:last").attr('id') ,  
success: function(html) {
 doMouseWheel = 1 ; 
if(html){
$("#postedComments").append(html);
//console.log("Append html--------- " +$(".postedComment:first").attr('id'));
//console.log("Append html--------- " +$(".postedComment:last").attr('id'));
$("#last").remove();
$("#postedComments").append( "<p id='last'></p>" );
$('div#loadMoreComments').hide();
}else{      
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of      
 countries !!!!!!!</h1></center>");
 // Added on Ver.0.4  
 //Disable Ajax when result from PHP-script is empty (no more DB-results )
 doMouseWheel = 0 ; 
}
}
});
}
});
});

Answer 1

Ok, problem solved. I separated style from behavior (CSS from PHP) and float: left; kicked in and saved the day.

I usually would never mix content/style/behavior however, being code from Github I was lazy and left it as is. As a consequence, the float property wasn’t being recognized.

I did this adjustment to my CSS and the problem was solved. DIV’s are taking 33% width of the 100% available in the container that is in the body which takes up 60% of the screen.

        #postedComments {
            width: 100%;
            display: block;
            }

        .postedComment {
            width: 33%; 
            float: left;
            }

For those who commented, the br tags will eventually be removed but, they weren’t causing the problem. They just separated the data within the div.

Also #postedComments with an s only affects the master DIV.

Thank you for your time regardless. Time to tackle a load of other stuff now… 🙂