Image placement on page

Highlighted
Shopify Partner
108 0 0
I've taken too much time trying to solve this. Can someone of the css/html experts give me a quick hand, please? I want to put two images side by side, every other paragraph. It's almost right: http://www.lojadoarco.com/pages/sobre-a-loja-do-arco but glitchy (sometimes the following paragraph or the next gets a strange indent; in Safari, at least). Here's what I have:

There must be a simpler way...
Ana Rita http://www.lojadoarco.com/
0 Likes
Highlighted
Shopify Staff
Shopify Staff
2002 0 45

I’d probably use a table just to be safe. Floating can lead to weird problems when the page is resized:


<table border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td><img src="/files/shops/0000/7470/assets/visita01-p.jpg"/></td>
    <td><img src="/files/shops/0000/7470/assets/visita02-p.jpg"/></td>
  </tr>
</table>
Tobias Lütke - Shopify CEO // http://twitter.com/tobi
0 Likes
Highlighted
Tourist
327 0 2

Your version works on all browsers I’ve checked so far, so you might just want to leave well alone : )

For a lower-code version I’d suggest you float them both left (then you won’t need to wrap them in a container div) and can apply the float directly to the images

Most of the tricky things to handle when dealing with floats are to do with a float’s relationship to the flow of the page around it, and whether the containing elements clear (wrap around it). IE also has a troubled relationship with floats and margins… but that’s another issue .

Without testing it I’d guess you could set up a style in your shop css and apply it directly to the images on your page.

Something like:

in shop/layout.css


img.floatpic{
  display:block;
  float:left;
  width:265px;
  margin:5px 5px 15px 0px;
}

and in the shopify page:
<img src="/files/shops/0000/7470/assets/visita02-p.jpg" class="floatpic" />

If you’re getting problems with the floats not clearing properly (your indentation problem?), you can use the .clearfix class that Cliff included in the dropify theme by wrapping your images in a
<div class="clearfix"> ... </div>
but it might be fine without.

Hope this helps
Mike

Mike www.anothervision.co.uk
0 Likes
Highlighted
Shopify Partner
108 0 0

Thank you so much! I hadn’t taken the time to answer, but I used Tobi’s solution soon after he posted it. Maybe you saw it already fixed, Mike. Thank you anyway. Floats always exasperate me, and you made a clear summary.

Ana Rita http://www.lojadoarco.com/
0 Likes