Question

I have a php scrpit that creates a bunch of divs containing an image and some text. The div’s are floated so they all read from left to right. My problem is that when a browser is resized or viewed on a smaller screen size the div’s will float underneath each other, what you’d expect css to do but not what I want. If only 4 divs will fir on the screen then it should only display 4 divs. If 7 then 7. This is what it is currently doing

And this is how it should look

What my code looks like

<div id="mainContent2">


                                    <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599385542.jpg" height="150px"  /></center>
                <span>Live -Frat Party At</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 200.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599399935.jpg" height="150px"  /></center>
                <span>Road To Revolution:</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 250.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362424712.jpg" height="150px"  /></center>
                <span>2 Points Of Authority</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426132.jpg" height="150px"  /></center>
                <span>Somewhere I Belong</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426302.jpg" height="150px"  /></center>
                <span>Faint (Single)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362483262.jpg" height="150px"  /></center>
                <span>Reanimation (Remix</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 150.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362484622.jpg" height="150px"  /></center>
                <span>Meteora (Import)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 150.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 1987.jpg" height="150px"  /></center>
                <span>Hybrid Theory</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2024.jpg" height="150px"  /></center>
                <span>Reanimation (Remix Album)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2061.jpg" height="150px"  /></center>
                <span>Live In Texas</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>

</div>

There will be multiple divs on a page like this so what is the best solution here that if the browser is resized it will hide or show more divs without the page been reloaded and that is cross browser compatable

I used this script that worked in ff, chrome, opera but not IE. It would load the page correctly but when you resized the browser it wouldn’t hide or show more divs. You would have to reload the page again

<script type="text/javascript">
          function newReleaseDisplay () {
               if (width > 1000) {
       var divsToDisplay = Math.floor(width / 175);
       $("#mainContent2 > div").slice(1).show();
       $("#mainContent2 > div").slice(divsToDisplay).hide();
       }
       else {
            var divsToDisplay = Math.floor(1000 / 175);
            $("#mainContent2 > div").slice(1).show();
            $("#mainContent2 > div").slice(divsToDisplay).hide();

       }
      }
    var width = $(window).width();
    window.onload = newReleaseDisplay();

$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
       newReleaseDisplay ();
   }
});
</script>

Answer 1

Just float all .newReleaseDiv left, and set #mainContent2 to have a fixed height of one row’s height and overflow: hidden;

JavaScript isn’t really necessary here. CSS should be used for display/layout instead.