• Locked
2 replies [Last post]
Sun, 2015-05-17 06:51
dschwart
dschwart's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2015-05-16
Posts: 2
Points: 3

Consider the following two lines:

  <button id="inputButton">Add text</button>
 
  <div id="aDiv" style="float:right; margin-left:-9em">4th div</div>

I am trying to get the div to appear on the same line as the button, to the right of the button, not that far away from the button.

float:right gets it on the same line, but at the other end of the line. Far away from the button, which is left justified.

My lame attempt to move the div by aadjusting margin-left did not work.

Can someone show me how to snuggle that div next to the button?

Top
Tags:
Sun, 2015-05-17 19:48
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Have you considered the display property?

See CSS display module

See also MDN Display.

For example:

    <button id="inputButton">Add text</button>
    <div id="aDiv"
         style="display:inline-block;">
      4th div
    </div>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2015-05-17 20:57
#2
dschwart
dschwart's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2015-05-16
Posts: 2
Points: 3

Thanks, that did it!

And thanks for the links to tutorials

Top
  • Locked