I have a group of 4 authors' photos that I want right floated at the top of their article. It looks fine, but just realized they are in reverse order. So I wrapped another div around the group and right floated it and left floated the others, but still getting reverse order.
Want: Auth1 Auth2 Auth3 Auth4
Getting: Auth4 Auth3 Auth2 Auth1
Ideas?
Thanks.
<div class="figgroup">
<div class="fig">
<img src="../Images/auth1.jpeg" />
<p class="caption">Author1</p>
</div>
<div class="fig">
<img src="../Images/auth2.jpeg" />
<p class="caption">Author2</p>
</div>
<div class="fig">
<img src="../Images/auth3.jpeg" />
<p class="caption">Author3</p>
</div>
<div class="fig">
<img src="../Images/auth4.jpeg" />
<p class="caption">Author4</p>
</div>
</div>
div.fig {
display: table;
float: right;
}
div.fig p {
display:table-caption;
caption-side:bottom;
}
div.figgroup fig {float:left;}
div.figgroup {float:right;}