buttons floating in block next to image

Question

I'm a beginner and would like to get some help and see where I'm making a mistake. I would like it so the last buttons named "Dealer" and "Private Party" to float next to the picture of the iPhone on the left hand side of the picture. Thanks in advance

HTML:

  <div class="recent-trade-img" style="margin:10px 0 0 0">
  <input class="sell-type" value="Dealer" type="button"><input class="sell-type" value="Private Party" type="button">
  <a href="prices_iPhone_2G_16GB_ATT.html"><img src="images/specs_iPhone_2G.jpg" width="186" height="182" alt=""/></a>
  </div>
  <div class="name">
  <a href="prices_iPhone_2G_16GB_ATT.html">iPhone 2G<br> 16GB AT&amp;T</a>
  </div>

CSS:

.sell-type  { 
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
color: #0564BC;
/*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.2);*/
border-radius: 4px 4px 4px 4px;
cursor: pointer;
font-weight: bold;
padding: 5px 0;
/*width:130px;
height:58px;*/
width:100px;
height:48px;
margin: 4px;
font-size: 14px;
background-size:70% !important;

}

.sell-type:hover  {
border-color: #0564BC;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
color: #36658f;
}

Answer 1

What you do is place the 2 buttons in a div and the image in its own div

<Div class="dealer_priv_btn">
 Butons come here....
</div>

<div class="the_image">
   Image tag comes here...
</div>

Your css should now look like this for these two classes

.dealer_priv_btn{float:left; width:100px; height:100px;}
.the_image{float:left; width:100px; height:100px;}

Please declare your own sizeds I.e width and height.. Play with that code make it work for you..

GOoDLucK :)

Answer 2

the below code works modify it according to your needs

HTML:

<div class="supreme container">
  <img src="the iphone.jpg" class="i-image">

  <div class="sub_container">
    <div class="button_deal">dealer</div
    <div class="button_private_party">private party</div>
  </div>

</div>

CSS

.supreme container{
display:inline-block
}

.i-image{
float:left;
display:block;
width:150px;
height:150px;
}

.sub_container{
float:left;
display:block
}