File last modified on August 18, 2022

Floating Images

Floating image widths shouldn't exceed more than 35%. If a floating left or right image is to be used the export from InDesign should be checked since the image can sometimes be placed right before a header and could cause rendering issues, example:

Bad

html
1<p>Bacon ipsum dolor amet bresaola bacon picanha, ground round fatback doner jowl.</p>
2<div class="imgLeft">
3  <img src="../img/foo.png" alt="foo" />
4</div>
5<h2>Frankfurter</h2>
6<p>
7  Frankfurter corned beef tenderloin andouille, meatloaf chuck tongue biltong sausage picanha pork
8  chop ham hock.
9</p>
10<p>
11  Chicken drumstick ham corned beef, pork chop meatloaf ground round doner kevin. Jerky chuck shank
12  sausage.
13</p>

Moved image before the <p>:

Good

html
1<div class="imgLeft">
2  <img src="../img/foo.png" alt="foo" />
3</div>
4<p>Bacon ipsum dolor amet bresaola bacon picanha, ground round fatback doner jowl.</p>
5<h2>Frankfurter</h2>
6<p>
7  Frankfurter corned beef tenderloin andouille, meatloaf chuck tongue biltong sausage picanha pork
8  chop ham hock.
9</p>
10<p>
11  Chicken drumstick ham corned beef, pork chop meatloaf ground round doner kevin. Jerky chuck shank
12  sausage.
13</p>

Left Float

HTML

html
1<div class="imgLeft">
2  <img src="../img/foo.png" alt="foo" />
3</div>

CSS

css
1.imgLeft {
2  text-align: justify;
3  width: 35%;
4  float: left;
5  margin: 0 0.3em 1em 0;
6}
7.imgLeft img {
8  display: inline-block;
9  width: 100%;
10  page-break-inside: avoid !important;
11}

Right Float

HTML

html
1<div class="imgRight">
2  <img src="../img/bar.png" alt="bar" />
3</div>

CSS

css
1.imgRight {
2  text-align: justify;
3  width: 35%;
4  float: right;
5  margin: 0 0 1em 0.3em;
6}
7.imgRight img {
8  display: inline-block;
9  width: 100%;
10  page-break-inside: avoid !important;
11}

Both

Note

Image margin should always be checked/modified and the current code examples are just for rendering. Every title's CSS has different font size, line height and margin which are factors in good rendered floating images.

If both floating right and left images are being used the CSS can be consolidated to:

css
1.imgLeft,
2.imgRight {
3  text-align: justify;
4  width: 35%;
5}
6.imgLeft {
7  float: left;
8  margin: 0 0.3em 1em 0;
9}
10.imgRight {
11  float: right;
12  margin: 0 0 1em 0.3em;
13}
14.imgLeft img,
15.imgRight img {
16  display: inline-block;
17  width: 100%;
18  page-break-inside: avoid !important;
19}