Home/ Questions/Q 8136699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T10:50:33+00:00

Situation is simple. I need to wrap text around two inline objects (buttons with

  • 0

Situation is simple. I need to wrap text around two inline objects (buttons with images), but those buttons should be in two rows (not side by side).

Problem is – necessary buttons are really tiny, (less than half width of the screen) – so they align up in one line.

Here is what I got now:

enter image description here

And here is what I am trying to achieve:

enter image description here

And here is the code I am experimenting on:

<html>

<body>

<a href="http://link" target="_blank">
<div style="float:right;right:30px;top:30px;display:inline-table;">
<img id="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</div> </a>

<a href="http://link" target="_blank">
<div style="float:right;right:30px;top:30px;display:inline-table;">
<img id="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</div> </a>

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. 

</body>

</html>
  • TableView cannot be used – because then there would be empty space under buttons.
  • If I enter a new line between buttons – then text starts wrapping only around second button.
  • There is a possibility, that I add a bit text between both buttons, but then I need to calculate precisely how much text should be cut out of main text keeping in mind that font can change etc.

P.S. (for easier helping)
I am testing the code on this site:w3schools

Thank You in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can put them both in a 30px wide <div> and float the <div> right.

    Demo: http://jsfiddle.net/ThinkingStiff/GdpNv/

    Output:

    enter image description here

    HTML:

    <div id="buttons" style="float:right;width:30px;">
    <a href="http://link" target="_blank">
    <div>
    <img class="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
    </div> </a>

    <a href="http://link" target="_blank">
    <div>
    <img class="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
    </div> </a>
</div>
    • 0