jqueryCSS Photo Gallery Floating IssueMIxing Landscape & Portrait Photos

Whats up everybody,

So I've been struggling with this for a bit and can't seem to get it.

I want to have a photo gallery that fits Landscape & Portrait photos together & doesn't leave any blank space (unless of course on the very end of the gallery if necessary).

We'll be resizing the images that are pulled in to 2 sizes (seen in the css below)...but then i can't figure out how to place them together to fit nicely.

I'm open to any ideas (so it doesn't necessarily have to be just css - although that would be preferred if its possible). This may be something small i'm overlooking. But the code is below - Notice the blank spaces between the photos when a portrait photo can't float all the way to the left.

Thanks a ton...

#galleryrow {
float: left;
width: 690px;
height: 1600px;
background-color: lightyellow;
margin-left: 60px;
}

#galleryrow img.portrait {
float: left;
background-color: white;
height: 300px; /*  Height = 300 + 13 + 13 = 326  */
width: 200px; /* Width = 200 + 12 + 12 = 224  */
padding: 13px 12px;
margin-right: 4px;
margin-bottom: 4px;
border: 1px dashed lightgrey;
}

#galleryrow img.portrait:hover {
background-color: #e5e8e7;
height: 300px;
width: 200px;
}

#galleryrow img.landscape {
background-color: white;
height: 130px; /* Height = 130 + 15 + 15 = 160    Multiply by 2 stacked = 320  */
width: 200px;
padding: 15px 12px;
border: 1px dashed lightgrey;

}

#galleryrow img.landscape:hover {
background-color: #e5e8e7;
height: 130px;
width: 200px;
padding: 15px 12px;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery w/ Floats</title>
<link rel="stylesheet" type="text/css" href="floatgallery.css">
</head>

<div id="galleryrow">
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="landscape" src="jetsetter.jpg"></a>
        <a href="#"><img class="portrait" src="philadelphia_skyline1.jpg"></a>
</div>

</html>

Remove float left from #galleryrow and added float left to img.landscape as below. Try it.

#galleryrow {
 /*float: left;*/
}

#galleryrow img.landscape {
 float: left;
}

Related Articles
  • This question already has an answer here: Photo rotate 90 degree while capture in some phones 4 answers Taking picture with camera intent rotate picture in portrait mode android 4 answers in my android app i capture the photo in portrait mode but whe
  • I have had a issue with image uploading. I have an application that when the user clicks "Upload Image" they are displayed with an alert box that says use camera or use photo gallery. once the user chooses one they are either triggered to the ca
  • I've been trying the CSS photo gallery example here to set up my own (here is the code). Everything works fine except: (1) The divs are setup using absolute measures in px. I find it frustrating to have to resize and adapt my photos to fit them. Inst
  • Hey I am developing an app that could tag an image with the geolocation and the time stamp, using Phonegap. I have been able to tag the image by editing the image as a canvas. Now I need to save that edited image to the device Photo gallery/library a
  • I am creating a PhoneGap app for the iPhone that displays a gallery of images. Some images are included with the project installation, and some are from the web. When a user clicks on an image, I would like them to be able to save the image to an iPh
  • This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy. I am making a photo gallery that has a few small thumbnail images and a large image in the
  • I am using below code to generate photo gallery from a folder. How can i sort thumbnails date wise. <?php /* settings */ $image_dir = 'photo_gallery/'; $per_column = 6; /* step one: read directory, make array of files */ if ($handle = opendir($image_
  • Photo Frame for 5x 5x7 picctures/photos
    Large photo frame that holds five 5x7" photos in mount supplied or any other combination if you make your own mount. Frame is an attractive metallic brown strip effect. Total external size of frame is approx 112cm x 51cm (approx 44inches x20inches) C
  • I have an UIViewController container with two UIViewController children implementing two different way of browsing a collection of items (one coverflow, one list), one for each orientation (landscape/portrait). When you tap an item the container show
You Might Also Like