为什么我的div不并排漂浮？

Question

我有两个嵌套在另一个div中的div，无论我尝试了什么，我都无法使第二个嵌套的div（书签包装纸）漂浮在第一个div上（表格包装纸）？ 我以为可能与宽度有关，但这无济于事，还尝试使用“ clearfix”，但这仍然无济于事。

我的HTML如下：

<div id="prof-wrapper">    

    <div id="editprofile-form-wrapper">

    <div id="title">
        <h1>Edit Profile</h1>
        <p>This information appears on your personal user page</p>

    </div><!--End of title-->

   <div class="form-horizontal">

            <?php if(isset($image)){echo $image;}?>
        <div id="thumbs" style="width:300px"></div>

            <form id="cropimage" method="post" enctype="multipart/form-data">

               <fieldset class="control-group">
                    <label class="control-label" for="firstname">Firstname</label>
                    <div class="controls">
                            <input id="firstname" type="text" name="fname">
                    </div>
               </fieldset>

               <fieldset class="control-group">
                    <label class="control-label" for="lastname">Surname</label>
                    <div class="controls">
                            <input id="lastname" type="text" name="secound">
                    </div>
               </fieldset>

               <fieldset class="control-group">
                    <label class="control-label" for="email">Email</label>
                    <div class="controls">
                            <input id="email" type="text" name="email">
                    </div>
               </fieldset>

               <fieldset class="control-group">
                    <label class="control-label" for="user_location">Location</label>
                    <div class="controls">
                            <input id="user_location" type="text" value="" name="user[location]">
                            <p>Where art thou?</p>
                    </div>
               </fieldset>

               <fieldset class="control-group">
                    <label class="control-label" for="bio">Bio</label>
                    <div id="user_description_box" class="controls">
                            <textarea id="bio" class="input-xlarge" name="bio" style="width: 243px; height: 122px;"></textarea>
                            <p class="bio-label">About yourself in<strong>160</strong>characters or less.</p>
                    </div>
            </fieldset>

            <div class="form-actions">
                <button id="submitButton" class="btn primary-btn" type="submit" name="submit">Save changes</button>
            </div>

        </form>     

        <form id="cropimage" method="post" enctype="multipart/form-data">

            <fieldset class="control-group">
                    <label class="control-label" for="photoimg">Profile photo upload</label>
                    <div id="user_description_box" class="controls">
                        <input id="photoimg" type="file" value="" name="photoimg">
                        <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
                        <!--<p class="bio-label">About yourself in <strong>160</strong> characters or less.</p>-->
                    </div>
           </fieldset>

            <div class="form-actions">
                <input type="submit" class="btn primary-btn" id="photoSubmit" name="submit" value="Photo Submit" />
            </div>    

           </form>

        </div><!--End of horizontal form-->

        </div><!--End of form wrapper-->

        <div class="clearfix"></div>

        <!-----------------------------------------Start of bookmarklet-------------------------------------------------->

        <div id="bookmarklet-wrapper">

        <h1 id="welcometext">Welcome to <img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/></h1>

      <h2 id="bminstructions">The Bookmarklet below should be dragged to your bookmarks bar so that you can share content with your friends on <!--<img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/>
      <a style="text-decoration:none;
        background:#25A6E1;
        background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
        background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
        padding:8px 13px;
        color:#fff;
        font-family:'Helvetica Neue',sans-serif;
        font-size:17px;
        border-radius:4px;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border:1px solid #1A87B9;
        position: relative;
        top: 20px;"
        href="javascript:
        (function () {
            function loadjscssfile(filename, filetype){
                if (filetype=='js'){
                    var fileref=document.createElement('script');
                    fileref.setAttribute('type','text/javascript');
                    fileref.setAttribute('id','jsDoc');
                    fileref.setAttribute('src', filename);
                }else if (filetype=='css'){
                    var fileref=document.createElement('link');
                    fileref.setAttribute('rel', 'stylesheet');
                    fileref.setAttribute('id', 'cssDoc');
                    fileref.setAttribute('type', 'text/css');
                    fileref.setAttribute('href', filename);
                }
                if (typeof fileref!='undefined')
                    document.getElementsByTagName('head')[0].appendChild(fileref);
                }
                var cssDoc = document.getElementById('cssDoc');
                if (cssDoc == null){
                    loadjscssfile('http://www.netsushi.net/css/css/bookmarklet.css', 'css');
                }
                var jsDoc = document.getElementById('jsDoc');
                if (jsDoc == null){
                    loadjscssfile('http://www.netsushi.net/js/bookmarklet.js', 'js');
                }else{
                    if ($('#feeder_bm_main').is(':visible')){
                        $('#feeder_bm_main').hide();
                    }else{
                        $('#feeder_bm_main').show();
                    }
                }
            void(0)
        }())
    ;"-->
    >NetSushi</a>

  </div><!--End of bookmarklet wrapper-->




        </div><!--end of edit-page-content-->​

我仍然不确定如何正确设置CSS格式以发布它，但是如果您有时间帮助我的话，您可以确切地看到此小提琴中正在发生什么？

http://jsfiddle.net/DannyW86/3gMuP/

Answer 1

如果仅将float: left在form-wrapper ，它应该可以正常工作： http : //jsfiddle.net/3gMuP/1/

Answer 2

您也可以使用display：inline-block; 在您要彼此相邻的2个div中。

Answer 3

这对我有用：

#editprofile-form-wrapper {
  width: 50%;
  float: left;
}

我再也没有其他CSS了，而这两列现在彼此相邻。