Как переместить форму рядом с другой формой в html?

Question

В настоящее время я страница Ань Изменить детали счетов "на моем сайте, но я хотел бы настроить HTML так, что секция изменения пароля находится рядом разделом основных деталей поэтому не огромное пространство к оставил.

страница в настоящее время (скриншот): http://prntscr.com/8n9hkt
Вот мой текущий код: http://pastebin.com/hGUSAvz0

Я знаю, что это возможно, но я просто не знаю код и где я должен поставить его.

Answer 1

Здесь вы идете. Не забудьте добавить .floatable (с шириной, которую вы предпочитаете) и стили .wrapper:

CSS: 
.wrapper:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.floatable{ 
    float: left; 
    width: 250px; 
} 

<?php 
/** 
* Edit account form 
* 
* @author    WooThemes 
* @package  WooCommerce/Templates 
* @version  2.2.7 
*/ 

if (! defined('ABSPATH')) { 
     exit; // Exit if accessed directly 
} 

?> 

<?php wc_print_notices(); ?> 

<form action="" method="post"> 

     <?php do_action('woocommerce_edit_account_form_start'); ?> 
    <div class="wrapper"> 
     <div class="floatable"> 
      <legend><?php _e('Main Details', 'woocommerce'); ?></legend> 
      <p class="form-row form-row-first"> 
       <label for="account_first_name"><?php _e('First name', 'woocommerce'); ?> <span class="required">*</span></label> 
       <br> 
       <input type="text" class="input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr($user->first_name); ?>" /> 
      </p> 
      <p class="form-row form-row-last"> 
       <label for="account_last_name"><?php _e('Last name', 'woocommerce'); ?> <span class="required">*</span></label> 
       <br> 
       <input type="text" class="input-text" name="account_last_name" id="account_last_name" value="<?php echo esc_attr($user->last_name); ?>" /> 
      </p> 
      <div class="clear"></div> 

      <p class="form-row form-row-wide"> 
       <label for="account_email"><?php _e('Email address', 'woocommerce'); ?> <span class="required">*</span></label> 
       <br> 
       <input type="email" class="input-text" name="account_email" id="account_email" value="<?php echo esc_attr($user->user_email); ?>" /> 
      </p> 
     </div> 
     <fieldset> 
      <legend><?php _e('Password Change', 'woocommerce'); ?></legend> 

      <p class="form-row form-row-wide"> 
       <label for="password_current"><?php _e('Current Password (leave blank to leave unchanged)', 'woocommerce'); ?></label> 
       <input type="password" class="input-text" name="password_current" id="password_current" /> 
      </p> 
      <p class="form-row form-row-wide"> 
       <label for="password_1"><?php _e('New Password (leave blank to leave unchanged)', 'woocommerce'); ?></label> 
       <input type="password" class="input-text" name="password_1" id="password_1" /> 
      </p> 
      <p class="form-row form-row-wide"> 
       <label for="password_2"><?php _e('Confirm New Password', 'woocommerce'); ?></label> 
       <input type="password" class="input-text" name="password_2" id="password_2" /> 
      </p> 
     </fieldset> 
    </div> 

     <?php do_action('woocommerce_edit_account_form'); ?> 

     <p> 
       <?php wp_nonce_field('save_account_details'); ?> 
       <input type="submit" class="button" name="save_account_details" value="<?php esc_attr_e('Save changes', 'woocommerce'); ?>" /> 
       <input type="hidden" name="action" value="save_account_details" /> 
     </p> 

     <?php do_action('woocommerce_edit_account_form_end'); ?> 

</form>