CODEWITHSUNDEEP
htmlcss
user3923596
user3923596

Reputation: 31

Getting Divs to Stay Side By Side With Multiple Rows

So I'm making a pinterest-style page where there are four divs per row and there can be an unlimited number of rows. The problem that I've ran into is that if the height of the divs are not all the same, the divs will go all over the place.

This is what I mean:

What Should happen:

https://i.sstatic.net/y7WHN.png

What Actually happens:

https://i.sstatic.net/VT0mA.png

My code (I need to keep it simple and can't do four larger divs for each column because of some php stuff that I've added):

        <div id="newsList">
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
        </div>

CSS:

#newsList {
   width: 1330px;
   margin: 0 auto 0 auto;
   display: table;
   height: auto;
   overflow: auto;
}

#newsList > div {
   width: 313px;
   height: auto;
   float: left;
   cursor: pointer;
   margin-left: 15px;
   position: relative;
   overflow: auto;
   border-radius: 2px;
   background-color: white;
   margin-bottom: 16px;
   display: inline-block;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
   transition: all 0.3s ease-in-out;
}

Upvotes: 1

Views: 888

Answers (1)

TyBourque
TyBourque

Reputation: 628

Place the an outside container div that contains the divs with the content div that you would like to place inside them that way they can all be different lengths that way that the website pinterest does it.

.container {
width:150px;
float:left;
}
.Blue {
width:140px;
padding:2px;
margin:5px;
background-color:blue;
}
.Green {
width:140px;
padding:2px;
margin:5px;
background-color:green;
}

Here is a fiddle link: http://jsfiddle.net/ztdgz24n/1/

enter image description here

Upvotes: 1

Related Questions