Custom CSS gallery

Question

I want to create a photo gallery for one of my projets but I can't achieve it. What I want is something like that :

I don't know how many photo there will be but basically what it does is: - Insert first photo in photo_div #1 - Insert 2nd in #2 - Goes to new line - Insert 3rd in #3 - Insert 4th in #4 - Go to next column and first line - Insert 5th in #5 - etc.

What I've made so far is the following code :

<div id="scroll_container">
  <div id="photo_0" class="div_photo">
    <!-- More content inside -->
  </div>
</div>

And the CSS code :

scroll_container{
  height:100%;
  width:550px;
  overflow-x:scroll;
  overflow-y:hidden;
}

.div_photo{
  float:left;
  width:250px;
  height:250px;
  border:1px solid black;
  margin:0 5px 5px 0;
  position:relative;
  display:inline-block;
}

But all I can achieve is a two columns gallery with 3 lines.

Could you help me to solve that ?

Thanks

Answer 1

Looks like your images are always of the same size, and that your problem is just the special order that you want.

In that case, this could be a solution:

.test {
    width: 40px;
    height: 40px;
    border: solid 1px blue;
    float: left;
    margin: 2px;
}

.test:nth-child(4n+3) 
{
    border-color: red;
    position: relative;
    top: 44px;
    left: -92px;
    margin-right: -44px;
}

.test:nth-child(4n+4) 
{
    border-color: red;
    position: relative;
    top: 44px;
    left: -46px;
    margin-right: -44px;
}

fiddle

The idea is to float the first 2 elements, the 5 and 6, and so on. the 3rd and 4th (and 7th and 8th) are positioned relative to take them to the special positions

Answer 2

CSS

.div_photo{
      float:left;
      width:250px;
      height:250px;
      border:1px solid black;
      margin:0 5px 5px 0;
      position:relative;
      display:inline-block;
  }

  .div_photo_1{
      float:left;
      width:250px;
      height:250px;
      border:1px solid black;
      margin:0 5px 5px 0;
      position:relative;
      display:inline-block;
  }

  #scroll_container_1 {
      height:auto;
      width:257px;
      display:inline-block;

  }

  #scroll_container {
      height:auto;
      width:514px;
  }

  #scroll_container_parent {
      height:auto;
      width:771px;
      overflow-x:scroll;
      overflow-y:hidden;
  }

HTML

<div id="scroll_container_parent">
     <div id="scroll_container">
        <div id="photo_1" class="div_photo">1</div>
        <div id="photo_2" class="div_photo">2</div>
        <div id="photo_3" class="div_photo">3</div>
        <div id="photo_4" class="div_photo">4</div>
        <div id="photo_6" class="div_photo">6</div>
        <div id="photo_7" class="div_photo">7</div>
        <div id="photo_9" class="div_photo">9</div>
        <div id="photo_10" class="div_photo">10</div>
    </div>
    <div id="scroll_container_1">
        <div id="photo_5" class="div_photo_1">5</div>
        <div id="photo_8" class="div_photo_1">8</div>
        <div id="photo_11" class="div_photo_1">11</div>
    </div>
</div>

Modified HTML...may be this should be good

Answer 3

This way you can write your html:

<div id="scroll_container">
  <div id="photo_1" class="div_photo">
    <!-- More content inside -->1
  </div>
     <div id="photo_2" class="div_photo">
    <!-- More content inside -->2
  </div> <div id="photo_3" class="div_photo">
    <!-- More content inside -->3
  </div> <div id="photo_4" class="div_photo">
    <!-- More content inside -->4
  </div> <div id="photo_5" class="div_photo">
    <!-- More content inside -->5
  </div>
</div>

For the 5th one you can apply additional css with id as :

#photo_5 {
    display:inline-block;
    margin-left:520px;
    margin-top:-510px;
}

As you don't want to use table then you can achieve this with css.

Working Fiddle : jsFiddle Working Demo