Hi,
I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    body 
    { text-align: center;
      min-width: 1044px;
      margin: 0px;
      padding: 0px;
      font-family: arial;
    }
    #wrapper 
    { position: relative;
      text-align: left;
      width: 1044px;
      height: 100%;
      margin: 0px auto;
    }
    #top-header-block
    { width: 1010px;
      height: 170px;
      background-color: cyan;
    }
    #top-header-block img
    { height: auto;
      width: auto;
    }
    #logo
    { float: left;
    }
/*------------------------------------------*/
    #inner-div
    { height: auto;
      width: auto;
      position: absolute;
      left: 567px; 
      top: 41px;
    }
    #inner-div img
    { float: left;
    }
    #inner-div p 
    { float: left;
      margin-top: 3px;
      margin-left: 5px;
      color: #0d2474;
      font-family: arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
    }
/*------------Alternative to above-------------*/
    #img-B
    { float: left;
      margin-left: 315px;
      margin-top: 40px;
    }
    #top-header-block p 
    { float: left;
      margin-top: 43px;
      margin-left: 5px;
      color: #0d2474;
      font-family: arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
    }
/*------------------------------------------*/
  </style>
</head>
 
<body>
  <div id="wrapper"> 
    <div id="top-header-block">
       <a href="#">
        <img id="logo" src=""
           alt="" width="248" height="65"/></a>
     <div id="inner-div">
       <a href="#">
        <img src=""
           alt="" width="66" height="20" /></a>
      <p>: 0 items</p>
     </div>
<!-------------Alternative to above---------------------------->
       <a href="#">
        <img id="img-B" src=""
           alt="" width="66" height="20" /></a>
      <p>: 0 items</p>
<!-------------------------------------------------------------->
   </div>
</div>

</body>

</html>