CODEWITHSUNDEEP
htmlcss
Aridjar
Aridjar

Reputation: 311

CSS have img on the same column but different line

I'm in a situation since 3 day and I don't have found any answer to my question : how have div on the same width (containing images with a width of 320px) on the column (that's done) but not organize in line ?

Let me join a little sketch to explain that : at the left, it's what I've. At the right, it's what I want. (the second line is for the "media screen" when reducing the width of the screen/navigator : so have 4 to 3 to 2 to 1 (and vice versa). take care of the number of boxes) :

croquis of what I have and what I want

To explain how I've obtain this right part, here are the code :

html:

<div class="box">
<a href="#"><img src="#" alt=""/></a>
</div>

Simply a succession of this class, it can be directly on the body. The box is important because maybe I'll have to had tittles or others things.

css:

.box {
    position: relative;
    float: left;
    min-width: 340px;
    max-width: 24.80%;
    width: 24.79%;
    margin: 20px 0px 20px 0px;
}

@media only screen and (max-width: 1800px) {
    .box {
        min-width: 360px;
        max-width: 33%;
        width: 33%;
    }   
}

To complete this question, here are a restriction : it had to be dynamic and generic (so like that, I just have to make a copy of a div and replace the link of the image (that's before adding php and js), or add anything I want).

Upvotes: 0

Views: 90

Answers (2)

SOuřaan Gřg
SOuřaan Gřg

Reputation: 399

I had just tried to make like that right picture & I made that with seven div and all are in same width plus all picture in it are 320px same on size.I haven't tried with width.No media work I have to learn them too :) 

  <body>
    <div id='box1'>1</div>
    <div id='box2'>2</div>
    <div id='box3'>3</div>
    <div id='box4'>4</div>
    <div id='box5'>5</div>
    <div id='box6'>6</div>
    <div id='box7'>7</div>
  </body>


    /* css code!*/

     body
        {   
          margin: 0px;
        }

     #box1
        {
          width:450px;
          height:300px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-color: #da1;
          background-size:320px; 
          position:absolute;
          left:1px; 
        }

     #box2
        {
          width:450px;
          height:380px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:451px;
          background-color:#df4;  
        }   

     #box3
        {
          width:450px;
          height:195px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:0px;
          left:901px;
          background-color:#dd6; 
        }   

     #box4
        {
          width:450px;
          height:658px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:1px;
          top:300px;
          background-color:#ced; 
        }           

     #box5
        {
          width:450px;
          height:578px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:380px;
          left:451px;
          background-color:#cbb;
         }   

     #box6
         {
          width:450px;
          height:470px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:195px;
          left:901px;
          background-color:#ad9;    
         }

     #box7
         {
          width:450px;
          height:298px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:660px;
          left:901px;
          background-color:#d8f;
         }

Upvotes: 0

Dev-an
Dev-an

Reputation: 462

You should check out jQuery Masonry (http://masonry.desandro.com), which does exactly what you need.

If you cant use Masonry for some reason, you should first split your page in columns. Then stack div boxes in each column.

Upvotes: 1

Related Questions