ansaurus

Question

CSS: squeeze multiple images close to each other

Answer 1

A:

Put images 1 and 3 first in your HTML and add the attribute align="left" to them.

Alternatively, you can use CSS position:absolute and set explicit X,Y coordinates for each one.

elmonty 2010-07-30 16:13:16

Wow. I haven't seen `align="left"` since like 2001

Josh Stodola 2010-07-30 16:26:23

Answer 2

A:

Actually it would be easier if you could show some code... but you can position images like that

.image1{
     position:fixed;
     right:20px;
     top:50px;
}

.image2{
   position:fixed;
     right:100px;
     top:50px;
}

and experiment with position you acually want accordingly to the size of your images...

or you could present them as background images like that:

.something {
    background-image:url(yourpath.jpg);
    position:fixed;
    top:711px;
        left:10px;
    display:block;
    height:100px;
    width:269px;
}

fixed position is not always the best way to go but it may work in your case...

try googling css images and you can find a lot of things... also this is a good resource: http://www.opera.com/company/education/curriculum/

and this is a really helpful css cookbook http://www.amazon.com/CSS-Anthology-Essential-Tricks-Hacks/dp/0980576806

good luck

rabidmachine9 2010-07-30 16:28:44

`position: absolute;` will probably be less confusing than `position: fixed;`.

strager 2010-07-30 17:46:03

Answer 3

A:

If you know the images ahead of time, then I don't understand why you need a general solution. jnkrois gave a good answer for a specific case.

If you want a general solution, I would position them all absolute, and use javascript to calculate the location at runtime. Essentially then you're looking for a packing algorithm, which you could find in a variety of places.

joelt 2010-07-30 17:43:20

Even if I know the images ahead of time, I don't know browser width so they might reflow. Yes, I could check for browser resize in javascript and then pack the images but it feel a bit unbelievable that it can't be done it pure CSS.

Theo Heikonnen 2010-07-31 01:15:09

Answer 4

+1 A:

You should try Masonry jQuery plugin. Take a look on the plugin page you should see an example of what you want to achieve: http://desandro.com/resources/jquery-masonry/

andreeib 2010-09-04 16:50:38

ansaurus

tags:

views:

answers:

CSS: squeeze multiple images close to each other

related questions