ansaurus

Question

Answer 1

+2 A:

I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' />
 <img src='b.jpg' />
</div>

</body>
</html>

Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
 white-space: nowrap;
 overflow: visible;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' /><img src='b.jpg' />
 <!-- Don't put a space between the images. -->
</div>

</body>
</html>

bradlis7 2009-10-30 19:03:49

I think the real key is to make sure there is no space or carriage return between the `<img>` statements.

bradlis7 2009-10-30 19:36:32

Forgot to mention, I wanted these images wrapped in a div to have fancy border around and info bar on top of each but after tweaking layout everything works like a dream, thanks a bunch!

Resistante 2009-10-30 20:40:36

ansaurus

tags:

views:

answers:

Autoscaling images in elastic layout

related questions