Лучший способ разместить форму, относящуюся к изображению

Question

Я использую HTML5 и хотел бы поместить изображение слева от страницы и форму справа от изображения. Это будет относительное позиционирование, поскольку изображение может быть любого размера. Является ли CSS лучшим способом для этого или есть ли лучшие способы использования HTML?

Я попробовал следующее

<div class='container'> 
    <div class='left'> 
     <form action="javascript:ShowLoadedImage(document.getElementById('image-field').value);"> 
      <input type="file" accept="image/*" id="image-field" name="image" onchange="this.form.submit()"> 
     </form> 
    </div> 
    <div class='right'> 
     <form> 
      First name: <input type="text" name="firstname"><br> 
      Last name: <input type="text" name="lastname">   
     </form> 
    </div> 
    <div class='clear'></div> 
</div> 

но получил изображение ниже форму. На самом деле у меня есть кнопка, начиная с последующего кода за пределами блока, между ними.

Answer 1

Я бы с основной HTML/CSS:

HTML:

<div class='container'> 
    <div class='left'> 
     <form> 
      <!-- your form --> 
     </form> 
    </div> 
    <div class='right'> 
     <!-- your image --> 
    </div> 
    <div class='clear'></div> 
</div> 

CSS:

.container { 
    width: 300px; 
} 
.left { 
    float:left; 
} 
.right { 
    float:right; 
} 
.clear { 
    clear:both; 
} 

Fiddle здесь: http://jsfiddle.net/SUEHs/

(я представил несколько размеров изображений, чтобы вы могли видеть, как идут элементы).