1
我有以下網頁： 
移動一個DIV毗鄰多個div（CSS）
我想左下，紅色邊框的div移動到畫紅框。 （旁邊的主要內容，3.5％的右邊距）
我的代碼似乎沒有工作，不管什麼。
body {
margin-top:20px;
margin-right:0;
margin-left:0;
margin-bottom:0;
overflow: auto;
background-color:#FFFFF0;
}
.cap {
text-transform: capitalize;
}
.p {
color:#37FDFC;
max-height:inherit;
}
#container {
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#header {
width:100%;
top:0;
}
#header p {
text-align:right;
margin-right:3%;
}
#footer {
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#footer:after {
content: "";
clear: both;
display: table;
}
.register_form {
border-radius: 6px;
border: 4px solid #C1CDCD;
width:70%;
}
#register_form {
margin-left:4%;
border-right: 2px dotted #00CDCD;
width:30%;
margin-right:0%;
display:inline-block;
}
#register_form h2 {
color:#00CDCD;
font-family:verdana;
}
#side_text {
width:30%;
float:right;
margin-right:30%;
}
#side_text h3 {
color:#00CDCD;
font-family:verdana;
}
#side_text p {
color:#838B8B;
font-family:verdana;
}
#login_form {
margin-left:4%;
border-right: 2px dotted #00CDCD;
width:30%;
margin-right:0%;
display:inline-block;
}
#login_form h2 {
color:#00CDCD;
font-family:verdana;
}
.login_form {
border-radius: 6px;
border: 4px solid #C1CDCD;
width:70%;
}
#just_registered_text {
text-align:center;
color:#00CDCD;
font-family:verdana;
}
#errors {
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other {
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
#profile_name_div {
margin-left:3%;
color: #00b4b4;
font-size: 27px;
font-family:verdana;
font-weight: 700;
display:inline;
}
#change_settings a {
margin-left:5%;
color:lightblue;
font-size: 16px;
font-family:verdana;
font-weight: 700;
}
#settings_space h2 {
margin-left:3%;
color:#00CDCD;
font-size: 27px;
font-family:verdana;
font-weight: 700;
}
#settings_space textarea {
overflow: hidden;
resize: none;
border: 2px solid #00CDCD;
margin-left:3%;
border-radius: 8px;
}
#settings_space:first-letter {
text-transform: capitalize;
}
#settings_space label {
margin-left:8%;
color: #009acd;
}
.settings_submit {
margin-left:5%;
}
.info {
margin-left:3%;
display:inline;
color:#838B8B;
font-family:verdana;
width:100%;
}
#photo {
display:block;
border: 1px solid black;
width:200px;
height:200px;
margin-left:3.5%;
}
#actual_photo {
width:200px;
height:200px;
}
#change_pp {
background:#f9f9f9;
border-bottom: 1px dashed #ccc;
border-top: 1px dashed #ccc;
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
width:200px;
margin-left:3.5%;
padding:0;
}
#proj {
display: none;
}
#button {
width:100%;
}
#change_pp input[type=file] {
width:100%;
}
.info > b {
color:#00CDCD;
}
#about_me_header {
margin-left:3.5%;
color:#B4CDCD;
border: 5px solid #00b4b4;
border-radius:20px;
width:50%;
}
#about_section {
border:2px solid red;
width:30%;
}<div id='container'>
<div id='header'>
<p>The current date is $date:</p>
</div>
<span id="profile_name_div"> example </span>
<span id="change_settings">
<a href='account_settings.php'>Change Settings</a>
</span>
<div id="photo">example</div>
<div id="change_pp">
<button id="button" onclick="showForm()" >Change Profile Picture</button>
<form id="proj" action="include/form_handle.php" method="POST" enctype="multipart/form-data">
<input type="file" value="change" name="pp_file"/>
<input type="submit" name="pp_submit" value="Upload Photo"/>
</form>
</div>
<div id="about_section">
<h1 id="about_me_header">About me header</h1>
<br/>
<div class="info"><b>Bio: </b>text</div>
<br/><br/>
<div class="info"><b>Interests: </b>text</div>
<br/><br/>
<div class="info"><b>Favorite Quotes: </b>text</div>
<div id='footer'></div>
</div>
</div>的jsfiddle：https://jsfiddle.net/8jczhzaL/2/
- 我試圖浮動的div並沒有什麼作品。
如何將我的div移到其他div旁邊？爲什麼沒有浮動工作？