Images side by side in EPUB

[swepub]

Hi all

Is it posssible to have two or more images side by side in an EPUB?
If yes, how does a sample code look like?
If no, is the best option to make merge two images into one in Photoshop?

[Turtle91]

You can use the float command in your css file:

CSS
.images  {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img class="floater" alt="" src="../Images/img_1.png"/>
  <img class="floater" alt="" src="../Images/img_2.png"/>
  <img class="floater" alt="" src="../Images/img_3.png"/>
  <img class="floater" alt="" src="../Images/img_4.png"/>
</div>

-OR-

CSS
.images     {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_2.png"/>
  <img alt="" src="../Images/img_3.png"/>
  <img alt="" src="../Images/img_4.png"/>
</div>

I prefer the 2nd one...it's a little cleaner.

[Quoth]

It also works without float. An enclosing p or div can center them if the css for that has suitable CSS.
I'd put a class on each image to set the size. If you set the height all the same it looks better. The image class can also space them or have no spacing (margin and padding 0 in case set elsewhere).

[DiapDealer]

Moved this to the EPUB forum since it's not really a Sigil topic.

[swepub]

Originally Posted by Turtle91

You can use the float command in your css file:

CSS
.images  {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img class="floater" alt="" src="../Images/img_1.png"/>
  <img class="floater" alt="" src="../Images/img_2.png"/>
  <img class="floater" alt="" src="../Images/img_3.png"/>
  <img class="floater" alt="" src="../Images/img_4.png"/>
</div>

-OR-

CSS
.images     {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_2.png"/>
  <img alt="" src="../Images/img_3.png"/>
  <img alt="" src="../Images/img_4.png"/>
</div>

I prefer the 2nd one...it's a little cleaner.

I used your 2nd one and it works great. Just one more question - can you adjust the space between the images and center the two images?

[Quoth]

Have the outer div have CSS in its class to set left & right margins and padding 0 and center

HTML

<div class="centred-stuff">
  <img class="img-1" alt="" src="../Images/img_1.png"/>
  <img class="img-2" alt="" src="../Images/img_2.png"/>
  <img class="img-3" alt="" src="../Images/img_3.png"/>
  <img class="img-4" alt="" src="../Images/img_4.png"/>
</div>

Using <p class="centred-stuff"> (with a closing </p>) can work well instead of div and suit non-heading centred text.

I would use <p>

CSS

.centred-stuff {
   margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center
}

.img-1 {
  height: 100 px;
  width: auto;  /* or exact pixels */
  padding-right: 5px;
}

No padding on the last image on the line. 
If you use "pt" instead of "px" some renderers might change the image size as user changes font size!

You can space images in the one <p> tag using a single space.

[Turtle91]

Originally Posted by swepub

I used your 2nd one and it works great. Just one more question - can you adjust the space between the images and center the two images?

Yes, just set the margin to auto and define a specific width for the div: width = image(s) + padding
5+200+5 + 5+200+5 = 420px

CSS
.images     {clear:both; width:420px; margin:0 auto}
.images img {float:left; width:200px; padding:0 5px}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_1.png"/>
</div>

This is a little less dynamic as you're locking in the image size in px instead of leaving it as a %. If you really need it to be dynamic, replace the px with % like this:

.images     {clear:both; width:50%; margin:0 auto}
.images img {float:left; width:45%; padding:0 2.5%}

You can set the amount of screen space the images take up by changing the % in the .images width...for example, width:50% => width:75%


Edit:
If the different values for width are confusing just remember that the width refers to the container’s width. In this case, the img width is 45% of the containing div. The total width of the images + padding equals 100% of the div width.
For 2 images:
2.5%+45%+2.5% + 2.5%+45%+2.5% = 100%
For 3 images:
1.66%+30%+1.66% + 1.66%+30%+1.66% + 1.66%+30%+1.66% = 100%

The width of the div is the % of ITS container (the body/document)