Automatic Sizing For <div/>

[BoulderBum]

I have a div that acts as a popup when a user mouses-over an element. The problem is that I want it to be form-fitting and not use a fixed width, but I also want to right align an element at the bottom of the div.

<style type='text/css'>
   .comment {
   position:absolute; 
   visibility:hidden; /* changed to visible by javascript */
   width:auto; /* <- trouble with this */
   }
</style>

...

<div class='comment' />
   <div>
       <div>text goes here</div>
   </div>
   <!-- I want the link below right-aligned at the bottom of
        the parent DIV -->
   <div style='float: right;'>
      <a href='#'>click for action</a>
   </div>
   <br style='clear: both' />
</div>

With this setup, however, the div ends up extending all the way to the right of the viewport unless I use a fixed width.

Is there a way I can structure the above markup differently so I have my link right-aligned, but don't have to worry about the div extending all the way to the right of the viewport?

MCP, MCTS - .NET Framework 2.0 Web Applications

 

[Vragabond]

You could try with text-align: right; on the paragraph that the link is in, but I am not sure if that will solve your problem.

However, your problem will arise also when your comment is long. Since your width has no restriction in width it will simply grow until it comes to the edge. I would have the width set to auto but would specify a max-width. This will work in all modern browsers and you can easily find workarounds for spoofing max-width in IE6.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BoulderBum]

I was definately considering max-width, but that right-align thing is what is killing me.

Do you happen to know if the text-align is supported for the link? I know I've tried to use it to align other elements before, and it was only supported by IE (the rest just supported it for free-flowing text).

I'll have to experiment...

MCP, MCTS - .NET Framework 2.0 Web Applications

 

[Vragabond]

Link is an inline element so you cannot align it anywhere -- it only takes up as much space as the text within it.

That is why I said to put text-align: right; on the paragraph that holds the link. We might disagree whether the link belongs in a paragraph (<p>) or a div, but in the end, the solution is the same:

   <div style='text-align: right;'>
      <a href='#'>click for action</a>
   </div>

of course, the link inside needs to be an inline element. If it is a block level element (its default display has been changed by css' display or float attributes), then you will need to do the following (this would eventually be in a separate stylesheet, this is just for ease of presentation):

   <div>
      <a style='margin-left: auto;' href='#'>click for action</a>
   </div>

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]