CODEWITHSUNDEEP
csslayoutgridthumbnailsfluid
user2264516
user2264516

Reputation: 21

Evenly spaced image grid

I've been all over this site, but haven't found decent solution yet.

I'm making a photography site that has a fixed menubar div on the left and the content div flowing on the right. In the photo gallery page there should be a grid of image thumbnails with fluid margins so that the thumbnails are always evenly spaced across the right (content) div.

Here's the structure:

<body>
<div id="wrapper">
<div id="left_column">
<div class="navigation"></div>
</div>
<div id="right_column">

    <div id="thumb_container" class="grayscale">
    <a href="#"><div id="thumb_fx" ></div></a>
    <img src="images/testimg.jpg" width="240" height="187" />
    </div>
...
    <div id="thumb_container" class="grayscale">
    <a href="#"><div id="thumb_fx" ></div></a>
    <img src="images/testimg.jpg" width="240" height="187" />
    </div>

</div>
</div>
</body>

^There is a vignette roll over animation in each thumbnail.

And the CSS:

html {
height: 100%;
padding:0;
margin:0;
}

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrapper {
    float: left;
    height: 100%;
    width:100%;
    padding:0;
    margin:0;
}

#left_column {
    position: fixed;
    top: 0;
    bottom: 0; 
    left: 0;
    z-index:100;
    width: 240px;
    height: 100%;
    overflow: hidden;
    background-color:#ff0000;
}

#right_column {
background-color:#cccccc;
width:auto;
height:100%;
    margin-left: 240px;
    position: absolute;
}

#thumb_container {
    position: relative;
    max-width:50%;
    min-width:240px;
    height:auto;
    border-color:#000000;
    display: inline-block;
    margin: 2%;
}



#thumb_fx { 
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.5s linear;
    transition: 0.5s;
    -moz-transition: 0.5s; /* Firefox 4 */

    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent;
    box-shadow:inset 0px 0px 85px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,1);
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,1);
}

#thumb_fx:hover {   
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.5s linear;
    transition: 0.5s;
    -moz-transition: 0.5s; /* Firefox 4 */
}



.grayscale img{
    max-width:100%;
    min-width:50%;
    height:auto;
    position: relative;
    border:none;
    z-index: -1;
    position: relative;
}

The best solution so far is this: http://jsfiddle.net/VLr45/1/ but the margins go way too tight before the div is dropped to the next row. And I don't understand how to adjust them.

Any help?

Upvotes: 2

Views: 1900

Answers (1)

Johan
Johan

Reputation: 19072

When you calculate the number of boxes that will fit, add the minimum margin you would like:

Margin as pixels

var boxMinMargin = 10; // 10px

var columns = Math.floor(parent / (box + boxMinMargin));

http://jsfiddle.net/VLr45/14/

Margin as %

var boxMinMargin = box * 0.1; // 10% of box

var columns = Math.floor(parent / (box + boxMinMargin));

http://jsfiddle.net/VLr45/24/

If you prefer to set the margin with css, you can set the width in you box class

.box {
    margin: 2%;

    /*

    or

    margin-top: 2%;
    margin-right: 3%;
    margin-bottom: 4%;
    margin-left: 5%;    

    */
}

http://jsfiddle.net/VLr45/17/

Upvotes: 1

Related Questions