CSS Help! Basic float problem

by 5 replies
6
Hello Warriors,

I have got some problem making an auto positioned image gallery. Please check the attached image with this thread.

I have added a class, ".photo", with each image and made the width property to 150px and height as auto. The images are of different height, so when a new line is formed there is some gap left between the lines.

The code I have used is as follows:
Code:
.photo{
width:150px;
height:auto;
float:left;
margin:5px;
}
I want to remove the gap from the top of the image when a new line starts. The images must auto adjust their position so that it looks like they are floating. I want the images to stick to each other as well as maintaining the aspect ratio.

Your help will be acknowledged.

Regards
#website design #basic #css #float #problem
  • It would be better if you give the URL..have to set any height for the parent div ?
    • [1] reply
    • I am designing it currently, haven't made it live. I don't think it has something to do with parent ID height. I want the images to stick with each other as well as maintain the aspect ratio.
      • [1] reply
  • You have two options basically.

    One, is you can set an image wrapper div (put the floated class on the wrapper, not the image) to have a set height that will accommodate the largest of your images. Regular CSS can only create nice rows by floating if all the floated divs are the same height.

    Two, is you can work with the jQuery Masonry script which will automatically arrange all your divs into a nice layout and they can be any height whatsoever. It's actually quite easy to work with - just follow a few steps on the dev's site and you're good to go: jQuery Masonry
  • If you don't set a height on your .photo div, you will always experience this problem. If I were you I would do something like this (for the clean look).

    Code:
    .photo{ width:150px; float:left; margin:5px;
height:150px;
overflow:hidden;
}
    If you are insisting on not making the images square, then you must find the maximum height of your image and declare that as the height of .photo

    There is one way of doing this without declaring the height. And that would be to use separate wrapper divs. Wrap this div around every 4 images. This will give you some wiggle room.
Join the discussion

Next Topics on Trending Feed