Tips for organizing image divs into groups of three?

Question

Tips for organizing image divs into groups of three?

Hey everyone, I have multiple divs with classes like ItemLeft, ItemMiddle, and ItemRight. I want to know how I can display these image divs in rows of 3 using CSS or any simple method. Currently, all the images are displaying one below the other.

I am fetching the image divs through a getJSON call like this:

$.getJSON('http://www.awebsite.com/get?url=http://www.bwebsite.com/moreclips.php&callback=?', function(data){
    //$('#output').html(data.contents);

 var siteContents = data.contents;  

document.getElementById("myDiv").innerHTML=siteContents

Please note: every time I make the getJSON call, I receive 6 image divs which appear stacked vertically instead of 3 in a row!

Below are the div images retrieved by the getJSON call, but they are displayed one after the other rather than in rows of 3:

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id1234" title="galaxy">
      <img class="ItemImage" src="/Images/galaxyimg.jpg" alt="galaxy" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id1234" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

jquery html css styles

Answer 1

Answer №1

After reviewing your query, I have replicated your leftItem to generate multiple items and included a fiddle link below: http://jsfiddle.net/tVMet/

To make your divs float properly, you need to assign a float property to them. At the end of the third div, insert another div element for clearing the float.

<div class="clear" />



.ItemLeft, .ItemMiddle, .ItemRight
{
    float:left;
}
.clear
{
    clear:both;
}

Answer 2

After reviewing your query, I have replicated your leftItem to generate multiple items and included a fiddle link below: http://jsfiddle.net/tVMet/

To make your divs float properly, you need to assign a float property to them. At the end of the third div, insert another div element for clearing the float.

<div class="clear" />



.ItemLeft, .ItemMiddle, .ItemRight
{
    float:left;
}
.clear
{
    clear:both;
}

Answer 3

Answer №2

Creating an Image Gallery Layout:

    <div class="imagediv">

    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>

    <div class="clearfloat"></div>

    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>

    <div class="clearfloat"></div>

    </div>

Styling with CSS:

.imageitem {
   float:left;
}

.clearfloat {
   clear:both;
}

Answer 4

Creating an Image Gallery Layout:

    <div class="imagediv">

    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>

    <div class="clearfloat"></div>

    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>
    <div class="imageitem"> // add image content here </div>

    <div class="clearfloat"></div>

    </div>

Styling with CSS:

.imageitem {
   float:left;
}

.clearfloat {
   clear:both;
}

Answer 5

Answer №3

Creating a layout with multiple elements next to each other can be achieved in HTML using tables or by utilizing divs with the CSS property float: left. It is crucial to remember to insert a line break after each group of elements to prevent them from stacking on the same line.

Answer 6

Creating a layout with multiple elements next to each other can be achieved in HTML using tables or by utilizing divs with the CSS property float: left. It is crucial to remember to insert a line break after each group of elements to prevent them from stacking on the same line.

Tips for organizing image divs into groups of three?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for efficiently obtaining JSON Ajax data, saving it to local storage, and presenting it in a jQuery Mobile list view

Transfer a term to a different division - JavaScript Object Model

Designing draggable tags similar to those on LinkedIn, incorporating a parent div element containing an SVG image and text

leveraging the bootstrap grid system for a responsive layout that positions an image beside a div

Jquery solution for toggling multiple Divs individually

Populating JQuery autocomplete using a PHP array

Troubleshooting Problems with jQuery and JSON

choose characteristic using a filter

Tips for keeping a div fixed at the bottom of the page when scrolling after a checkbox has been selected

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

Angular's counterpart to withCredentials in jQuery AJAX

Having trouble applying CSS styling to the div element

IE11 not processing jQuery ajax response correctly

Prevent the occurrence of a page break in between dt and dd elements

Extract the value of a text box from within a div using jQuery in PHP

jquery for delaying the loading of images

Saving data in HTML using PHP and then downloading it

Showing data stored in a mySQL database on a Flot chart

Creating numerous Facebook posts using jQuery technology

Iterate through child DIVs to obtain their corresponding IDs