我遇到了基本的DIV佈局和定位問題

Question

我爲一個網站做了一個註冊頁面，現在想在註冊字段的左邊留下一些圖片。所以我想讓PictureWall出現在容器中的SignupBox旁邊。然而，註冊框被壓低。

這裏是我的html：

<div id = "Container"> 
    <div id ="PictureWall"> 
     <div class = "image"> 
     </div 
     <div class = "image"> 
     </div> 
     <div class = "image"> 
     </div> 
    </div> 
    <div id = "SignUpBox"> 
     <table id = "SignUpTable"> 
     <p id = "SubHeading">Sign Up.</p> 
      <form name = "NewUser" onsubmit= "validateForm()" action = ""> 
       <tr> 
       <td class = "FieldName">Username:</td> 
       <td class = "TextField"><input type = "text" name = "user"/></td> 
       </tr> 
       <tr> 
       <td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td> 
       </tr> 

       <tr> 
       <td class = "FieldName">Email:</td> 
       <td class = "TextField"><Input type = "text" name = "email"/></td> 
       <tr> 
       <td class = "Information"><em>We need this to verify your account.</em></td> 
       </tr> 

       <tr> 
       <td class = "FieldName">Password:</td> 
       <td class = "TextField"><input type = "password" name = "pwd"/></td> 
       <tr> 
       <td class = "Information"><em>6-20 characters</em></td> 
       </tr> 

       <tr> 
       <td class = "FieldName">Confirm Password:</td> 
       <td class = "TextField"><input type = "password" name = "confirmPwd"/></td> 
       <tr> 
       <td class = "Information"><em>just in case you didn't make mistakes!</em></td> 
       </tr> 

       <!-- Optional --> 


       <tr> 
       <td class = "FieldName">First Name:</td> 
       <td class = "TextField"><input type = "text" name = "fName"/></td> 
       <tr> 
       <td class = "Information"><em>optional</em></td> 
       </tr> 

       <tr> 
       <td class = "FieldName">Lastname:</td> 
       <td class = "TextField"><input type = "text" name = "lName"/></td> 
       <tr> 
       <td class = "Information"><em>(optional)</em></td> 
       </tr> 

       <tr> 
       <td><input type = "submit" value = "Submit"/></td> 
       </tr> 

     </table> 



      </form> 
    </div> 
</div> 

這裏是我的CSS：

/* Style Sheet*/ 

body 
{ 
margin: 0; 
padding: 0; 
background-color:white; 
} 

#TopBar 
{ 
    background-color: #3299E3; 
    width: 100%; 
} 
#SignUpLogo 
{ 
    margin-left: 5em; 
    width: 100px; 
    height: 70px; 
    font-family: Helvetica; 
    font-size: 60px; 
    text-align: centre; 
    color: white; 
} 
#Container 
{ 
    padding-top: 5px; 
    width: 90%; 
    height:100%; 
    margin-left: 5%; 
    -webkit-box-shadow: 0 0 5px 2px grey; 
    -moz-box-shadow: 0 0 5px 2px grey; 
    box-shadow: 0 0 5px 2px grey; 
    background-color: F7F7F7; 
} 
#PictureWall 
{ 
    width: 100px; 
    height: 100%; 
    background-color: red; 
    position:relative; 
} 
.image 
{ 
    height: 50px; 
    width: 50px; 
    background-color: blue; 
} 
#SubHeading 
{ 
    padding-left: 750px; 
    color:grey; 
} 
#SignUpBox 
{ 
    font-family: Helvetica; 
    font-size: 40px; 
    text-align: centre; 
    color: black; 
    float:right; 

} 
#SignUpTable 
{ 
    margin-top:50px; 
    font-size: 15px; 
    font-family: Helvetica; 
    margin-left: 700px 
} 
.FieldName 
{ 
    padding-right:100px; 
    padding-left:50px; 
} 
.TextField 
{ 
    padding-top:5px; 
} 
.Information 
{ 
    font-size: 11px; 
    color: black; 
    padding-left:50px; 
    padding-bottom: 10px; 
} 

Answer 1

請確保您的代碼有效。之後，做你的PictureWall一個float: left並留下了你的副標題中float: right;和padding-left: 750px;和SignUpBox

小提琴：http://jsfiddle.net/Xnh4X/

Answer 2

float並不能使它適用於向上移動的元素。它讓元素後面的內容向上移動。

由於#PictureWall出現在#SignUpBox之前，您需要浮動#PictureWall是您希望它們使用浮動並排出現。