Putting the email icon to the right

[anders_carlen]

Hi,

I guess I will start this category off by asking what seems to be a simple question:

How do you get the email icon (or print icon etc) to sit at the top right part of the contentitem div?

Here is the relevant HTML:

Code:

<div class="contentitem">
 <h2>Title goes here</h2>
   <div class="buttonheading">
     <span class="EmailIcon">
       <a title="... email link sits here..."/>
       </a>
     </span>
   </div>
(...)
</div>

And here is what I thought I should put in my .css file:

Code:

div.buttonheading{
float:right;
position:absolute;
top:0;}

But this sends the icons way up to the top of the screen, based on the body tag I guess. How can I have the icons sit at the top right of the div.contentitem?

Anyone?

/anders

[visualweb]

Anders:

Try setting the position of button heading to "relative" *(as you want it to stay nested within the div class "contentitem") and adding a right declaration like this;

Code:

div.buttonheading {
   display:     block;
   float:       right;
   position:    relative;
   right:       0;
   top:         0;
   width:       60px;
   }

[anders_carlen]

Anders:

Try setting the position of button heading to "relative" *(as you want it to stay nested within the div class "contentitem") and adding a right declaration like this;

Code:

div.buttonheading {
   display:     block;
   float:       right;
   position:    relative;
   right:       0;
   top:         0;
   width:       60px;
   }

Hi, thanks for trying to help. Much appreciated.
I too thought that this would do the trick, but the icons are still sitting too low. (In what seems to be inside the P-section of the following DIV.contentintro. See attached screenshot and code for an example. Any ideas why?

/anders

[visualweb]

Try adding:  clear:both or setting width at 100%, height at the height of the icons (plus pad if you want) and then add style declarations for the icons themeselves. It appears the float:right with exact dims is causing the icons to push down into p content. You should be able to work around this by creating a full width div block with no float, margin set to pad top and bottom and then float your print/email/send icons in their own divs -inside- the buttonheading div.

[anders_carlen]

Thanks for the effort, but still no luck.

The problem is (I think?) that the H1 spans the whole width, but there are no class attributes with width:100% set anywhere. Still it doesn't quite make sense to me why your original suggestion shouldn't work. Maybe when there are more users here, someone might share how they got it working. For now I give up...
/anders

[sametz]

Try:

Code:

div.contentitem {
     position:relative;
}

div.buttonheading {
     float:right;
     position:absolute;
     top:0;
}

By setting the parent div to relative, any absolutely positioned child element will treat the parent's top left hand corner as the 0,0 (top, left) coordinates, as opposed to the browser window's, which is the default. You can also substitute right:0; for float:right;. There is no need to float and absolutely position an element.

[anders_carlen]

Thank you! The adding of "position: relative" to the parent div did the trick.
Thanks!
/anders