Make content at the right most in a div tag

I have some html snippet

<div id="title">This is title<span id="close">X<span><div> 

The width of this div is dynamical, maybe 300 600 or 800 px. I want the "X" at the right most of the div at the same line. So write a css like below:

#开发者_如何转开发close
{
   margin-right:10px;
}

But it does not work. If I want to implement it, what should I config?

Best Regards,

<div id="title"><div class="float-right"><span id="close">X</span></div>This is title</div> 

and the class

.float-right{
float:right;
}

Use absolute positioning.

#title {position: relative; width: 300px}
#close {position: absolute; top: 5px; right: 5px} /* adjust based on required margin */

But keep in mind that the absolutely positioned content is outside the box model and it may overlap the content within the title div. You need to set appropriate padding/margin to avoid that.

There are a few things wrong with the HTML in your question:

• The CSS property "margin-right" gives you 10px of space to the right of your element, outside the border. Instead, you want to be using float:right (and a div instead of a span, since floating works with block elements only)

• Your tags are not closed (use <div></div> instead of <div><div>)

To achieve what you are after, try the following:

<div id="title">
    This is title <div id="close">X</div>    
</div>  

With the following CSS

#close 
{ 
 float:right;
}

Try this:

<div id="title">This is title<div><span id="close">X<span></div><div> 

and the styling:

#title div {
  text-align: right;
  float: right;
  clear: none;
}

Or you could get rid of the span entirely and just use the div, make it maybe 20px wide and style it with a different color so it would look more like a button.

Me, I'd use a graphic in an img for the close button, but to each his own.

Alternate arrangement:

<div id="title"><div style="width:20px"><span id="close">X<span></div>This is title<div>