6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

CSS Help! Basic float problem

by fazlerocks
5 replies
  • WEB DESIGN
    • |
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
#basic #css #float #problem
  • Profile picture of the author Patrick
    It would be better if you give the URL..have to set any height for the parent div ?
    Signature
    Website Development | Shopify Development | WordPress Development |Headless Development
    {{ DiscussionBoard.errors[4685466].message }}
    • Profile picture of the author fazlerocks
      Originally Posted by schwarzes View Post

      It would be better if you give the URL..have to set any height for the parent div ?
      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.
      {{ DiscussionBoard.errors[4685577].message }}
      • Profile picture of the author Patrick
        Originally Posted by fazlerocks View Post

        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.

        LOL...

        I dont understand why you even asked this question, when you are answering it yourself.

        And why isnt it got to do with height ?

        If I assign a height of 100px to an element, and assign a height of 200px to its parent div ( I hope you know what a parent div is ), then the size of that area, will always remain 200px, no matter what.
        Signature
        Website Development | Shopify Development | WordPress Development |Headless Development
        {{ DiscussionBoard.errors[4687523].message }}
  • Profile picture of the author Kezz
    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
    {{ DiscussionBoard.errors[4687091].message }}
  • Profile picture of the author Testeds
    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.
    {{ DiscussionBoard.errors[4687637].message }}

Trending Topics