div style float left and Magic Magnify Zoom question

div style float left Magic Magnify Zoom

[danepak]

Hi,

I'm very very new to HTML, so I was hoping that I could get a bit of help with this problem.

I'm working on a website done in Wordpress.

I'm trying to set up two images next to each other.
That's done with
<div style="float: left; width: 383px;
margin: 5px; padding: 15px; border: 1px solid black;">
<img src="image.jpg" alt="some_text"/>
</div>
<div style="float: left; width: 383px;
margin: 5px; padding: 15px; border: 1px solid black;">
<img src="image.jpg" alt="some_text"/>
</div>

However, as I'm using the Magic Magnifier plugin, I'm struggling to find out where to insert this.

The Magic Magnifier line by itself would be:
<a class="MagicMagnify" href="http://highresversionofimage.jpg"><img class="alignnone" src="http://lowresversionofimage.jpg" alt="" width="383" height="576" /></a>

But where do I insert this in the code, so it works with div style?

And also, how do I make the header on the next line look normal?
After the two images, there should be a new line underneath.
But instead it's squeezed in next to the right hand image.

<h2>Header text here</h2>

Basically, I would like:
Image with zoom / image with zoom (both on one line)
Header text here (on the next line)

[lucy24]

And also, how do I make the header on the next line look normal?
After the two images, there should be a new line underneath.
But instead it's squeezed in next to the right hand image.

<h2>Header text here</h2>

That part's straightforward. If both of your images are floats, they will float next to anything that follows. That's what the "float" concept means. So either make the second image a non-float, or set {clear: both} in your CSS boilerplate for all headers.

[danepak]

Hi Lucy,
Thanks for you reply.

When I set the 2nd image to float: none, it pushed it down to the next line.

[danepak]

What I meant was that it pushed the 2nd image on to the next line.

[Magic Toolbox]

Must you put the images in divs? You could put them next to each other in cells of tables like so:

<table>
<tr>
<td>
<img src="image1.jpg" alt="some_text"/>
</td>
<td>
<img src="image2.jpg" alt="some_text"/>
</td>
</tr>
</table>

To add Magic Magnify, you should link to the full size version of the image and add a class of MagicMagnify. For example:

<table>
<tr>
<td>
<a href="image1-big.jpg" class="MagicMagnify"><img src="image.jpg" alt="some_text"/></a>
</td>
<td>
<a href="image2-big.jpg" class="MagicMagnify"><img src="image2.jpg" alt="some_text"/></a>
</td>
</tr>
</table>

To style the table how you want it, you can add a class to the table and then add CSS formatting. For example:

<table class="imageboxes">
<tr>
<td>
<a href="image1-big.jpg" class="MagicMagnify"><img src="image.jpg" alt="some_text"/></a>
</td>
<td>
<a href="image2-big.jpg" class="MagicMagnify"><img src="image2.jpg" alt="some_text"/></a>
</td>
</tr>
</table>

and this CSS:

.imageboxes {
width: 383px;
margin: 5px; 
padding: 15px; 
border: 1px solid black;
}

[danepak]

Thanks Magic Toolbox.
This is perfect!

[Magic Toolbox]

Great!

There was a small error in the CSS. If you want to style each table cell, you should specify the td like this:

.imageboxes td {
width: 383px;
margin: 5px;
padding: 15px;
border: 1px solid black;
}

Also, make sure you are using the latest version of the WordPress module for Magic Magnify which is updated every couple of months: [magictoolbox.com...]

[danepak]

Thanks Magic Toolbox,

If I change the width to something else (like 100px), the image sizes doesn't change for some reason.
Am I doing something wrong here?

[lucy24]

If I change the width to something else (like 100px), the image sizes doesn't change for some reason.
Am I doing something wrong here?

No, your browser is doing something right. Images are displayed at actual size unless the <img> declaration itself gives a different size. It can be expressed either in pixels (should always be the real size) or in percentages. That means percentage of the containing box, not percentage of the image's real size. But then you have to perform further jiggery-pokery to make sure the image never comes out larger than its real size-- which is very rarely successful unless it's some kind of decorative blur.

If you want to display images at something other than their actual size in pixels, proceed with extreme caution. Among other things, you're forcing the user to download a larger image than they'll be seeing, and you're relying upon the browser to resize gracefully, which is not always the case.

[danepak]

Thanks Lucy,
But why would the 'width: 383px' line then be included in the first place, if it doesn't actually change anything, if altered?

[lucy24]

In most browsers, cell width is overridden by content width. That means if you set your cell to 200 px wide and all it contains is a bunch of short words or a 100-px picture, fine. But if you've got a 300-px picture or a hyphenless "antidisestablishmentarianism", the cell will become as wide as it needs to be. Conversely, some browsers will flatly refuse to make a cell 200px wide if it has no content (where "no content" means a single &nbsp; for safety's sake) while all surrounding cells have stuff in them.

In general, forcing cell widths is very iffy. It's one of the rare places where inline CSS sometimes makes a difference.

:: idly wondering if the table-haters would be happier if only CSS would call it, say, "grid layout" ;) ::

[danepak]

OK, thanks, Lucy :-)