tags:

views:

45

answers:

4

Hi all

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,

A: 

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> 
Robusto
Hi, the "X" is at the right most now, but it's not at the same line with the title, it goes to the second line.
Yongwei Xing
Give the div a width of, say, 20px. That should do it. Make sure you float:right and clear:none as well. You can also try putting the div *first* in the containing div and the text second.
Robusto
A: 

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;
}
Blakomen
I would highly recommend getting the Firebug (www.getfirebug.com) for Mozilla Firefox, which will allow you to inspect the html/css of your page and change it on the fly. Alternatively, you can also use the Developer Tools in IE8 (hit F12), but I personally find Firebug the easiest to use.
Blakomen
Hi, the "X" is at the right most now, but it's not at the same line with the title, it goes to the second line.
Yongwei Xing
I use the Aptana
Yongwei Xing
A: 

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.

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

and the class

.float-right{
float:right;
}
Bipul
And if you want that, the X will be some what 10 or 20 px right of the extreme right, use margin-right in the float-right class.
Bipul