Search code examples
cssstylesheet

align image to the right of h3

I'm trying to position the following items but can't quite get it right.

Her is the desired outcome:

|Blah Bah (img)                           Link|

The image is aligned to the right of the H3 on the left and the link is positioned to the far right. All is on the same line.

    <div style="float:left;"><h3>Blah Bah</h3></div>
      <a href="#"><img src="image\edit.png" /></a>
    <div style="float:right;">Link</div>

<html>
<style>
    h3
    {
        color: #0066CC;
        font-size: 130%;
        font-weight: bolder;
        padding-top: 0px;
        margin: 0px;
    }
</style>
<body>
    <div style="float: left;"><h3>Blah Bah</h3></div>
    &nbsp;<a href="#" style="padding-top: 25px;"><img src="go.gif" style="padding-top: 2px;" /></a>
    <div style="float: right;">Link</div>
</body>
</html>
Solution

  • Default a h3 tag has margin-top and margin-bottom, that's why your elements are not on the same row.

    You can change that by adding the following style:

    h3 {
   margin: 0;
}

    But better is to use a reset style sheet so you know all elements are reset. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/