我有一个容器div大约5个其他div。容器是960px，我希望浮动左侧的前4个div，宽度为710px，并将第5个和最后一个div放在其他4个内部div的右上方。我已经研究并尝试了很多不同的东西，但无法弄清楚为什么它漂浮在容器div的底部。
这对我自己来说，我只是想让一些看起来不错的东西快速加载。我不是专业人士所以请在编码时轻松一点（尽量不要笑太多：D）
这是HTML：
<div id=container>
<div id="menu">
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Those Little Stickers Home','','images/Menu Bar Images/menu_home_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_home_button.png" alt="Those Little Stickers Home Page" name="Those Little Stickers Home" width="137" height="40" border="0">
</a>
<a href="TLS iPhone 5 Sticker Gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('TLS Popular','','images/Menu Bar Images/menu_stickergallery_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_stickergallery_button.png" alt="See What's Popular" name="TLS Popular" width="137" height="40" border="0">
</a>
<a href="TLS Accessories Page.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('TLS Accessories','','images/Menu Bar Images/menu_accessories_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_accessories_button.png" alt="TLS Accessories Phone cases, bumpers, and much more" name="TLS Accessories" width="137" height="40" border="0">
</a>
<a href="TLS Select Your Device to Customize.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Select by Device','','images/Menu Bar Images/menu_selectbydevice_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_selectbydevice_button.png" alt="Select by Device" name="Select by Device" width="137" height="40" border="0">
</a>
<a href="TLS A Little About Us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('TLS A Little About Us','','images/Menu Bar Images/menu_alittleabout_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_alittleabout_button.png" alt="A Little About Those Little Stickers" name="TLS A Little About Us" width="137" height="40" border="0">
</a>
<a href="TLS Customize Your Device.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Create Your Own','','images/Menu Bar Images/menu_create_your_own_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_corporate_button.png" alt="Create Your Own Little Sticker Design" name="Create Your Own" width="137" height="40" border="0">
</a>
<a href="TLS Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','images/Menu Bar Images/menu_contact_button_RO.png',1)">
<img src="images/Menu Bar Images/menu_contact_button.png" alt="Contact Us" name="Contact Us" width="137" height="40" border="0">
</a>
</div>
<div id="header_container">
<div id="about_us_header">
<h1>iPhone 5/5s Little Sticker Gallery</h1>
Make your iPhone as unique as you are with our wide selection
of custom designed Little Stickers. The clear adhesive sticker covers and protects the
brushed metal on the back of your iPhone while the custom designs give it a unique style
just like you. Add a bumper to your Little Sticker and save some money.
There's billions of devices out there, be different.
<br>
</div>
</div>
<div id="gallery_container">
<div id="gallery_pics1">
<a href="TLS iPhone 5 Jordan Crowd Dunk.html"><img src="images/Optimized Images/iPhone 5/Jordan_Crowd_blackongold_iPhone5.png" width="170" height="322" class="hoverImage"></a><a href="TLS iPhone 5 Jordan Dunk.html"><img src="images/Optimized Images/iPhone 5/Jordan-Dunk_blackongold_iPhone-5.png" width="170" height="322" class="hoverImage"></a><a href="TLS iPhone 5 The Giving Tree.html"><img src="images/Optimized Images/iPhone 5/The-Giving-Tree_grayongold_iPhone-5.png" width="170" height="323" border="0" class="hoverImage"></a><a href="TLS iPhone 5 Snow White Apple Bite.html"><img src="images/Optimized Images/iPhone 5/Snow-White_grayongold_iPhone5.png" width="170" height="323" class="hoverImage"></a>
</div>
<div id="gallery_pics2">
<a href="TLS iPhone 5 Snow White Bandana G.html"><img src="images/Optimized Images/iPhone 5/Snow-White-G_grayonwhite_iPhone-5.png" width="170" height="324" class="hoverImage"></a><a href="#"><img src="images/Optimized Images/iPhone 5/Snow-White-Zombie_blackongoldl_iPhone5.png" width="170" height="324" class="hoverImage"></a><a href="TLS iPhone 5 Elvira Sideways.html"><img src="images/Optimized Images/iPhone 5/Elvira-Sideways2 edit_GOLDwithBLACK_iPhone5.png" width="340" height="324" class="hoverImage"></a>
</div>
<div id="gallery_pics3">
<a href="#"><img src="images/Optimized Images/iPhone 5/The-Munsters_blackongold_iPhone5.png" width="170" height="324" class="hoverImage"></a><a href="#"><img src="images/Optimized Images/iPhone 5/Bride-of-Frankenstein_grayongold_iPhone5.png" width="170" height="324" class="hoverImage"></a><a href="TLS iPhone 5 The Beatles Crosswalk.html"><img src="images/Optimized Images/iPhone 5/Beatles-Crosswalk_grayongold_iPhone5.png" alt="The Beatles Crosswalk Little Sticker for iPhone 5 and 5s" width="170" height="324" class="hoverImage"></a><a href="#"><img src="images/Optimized Images/iPhone 5/Chucky-OG_blackonwhite_iPhone5.png" width="170" height="324" class="hoverImage"></a>
</div>
<div id="gallery_pics4">
<a href="#"><img src="images/Optimized Images/iPhone 5/Devils-Rejects-Captain-Spaulding_blackongold_iPhone5.png" width="170" height="324" class="hoverImage"></a><a href="#"><img src="images/Optimized Images/iPhone 5/Pennywise-IT-Face_grayongold_iPhone5.png" width="170" height="324" class="hoverImage"></a><a href="TLS iPhone 5 Space Invaders.html"><img src="images/Optimized Images/iPhone 5/Space_Invaders_grayongold_iPhone5.png" width="170" height="323" class="hoverImage"></a><a href="TLS iPhone 5 Hand Hearts.html"><img src="images/Optimized Images/iPhone 5/Hand-Hearts_grayongold_iPhone5.png" width="170" height="324" class="hoverImage"></a>
</div>
<div id="categories">
<br>
<a href="TLS iPhone 5 Sticker Gallery.html"> Little Shop of Horrors</a>
<br>
<br>
<a href="TLS iPhone 5 Sticker Gallery.html" title="New Little Stickers">New Little Stickers</a>
<br>
<br>
<a href="#">Charity Little Stickers </a>
<br>
<br>
<a href="TLS Customize Your Device.html">Create Your Own Sticker</a>
<br>
<br>
<a href="TLS iPhone 5 Bumper Case.html">iPhone 5 Accessories</a>
<br>
<br>
<br>
<img src="images/categories banner.png" width="215" height="238">
</div>
</div>
<div id="footer">
<span style="vertical-align: middle; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; text-align: left; font-size: 14px;">Copywright © 2013 Those Little Stickers Inc. All rights reserved. Designed and located in Hermosa Beach, CA</span>
<a href="https://www.facebook.com/thoselittlestickers" target="_new"><img src="images/facebook_button.jpg" alt="Those Little Stickers Facebook Page" width="38" height="36" border="0" align="absmiddle" style="vertical-align: middle; "></a>
<a href="https://twitter.com/LittleStickers" target="_new"><img src="images/twitter_button.jpg" alt="Those Little Stickers Twitter Page" width="38" height="36" border="0" align="absmiddle" style="vertical-align: middle;"></a>
<a href="http://pinterest.com/LittleStickers/" target="_new"><img src="images/pinterest_button.jpg" alt="Those Little Stickers Pinterest Page" width="38" height="36" border="0" align="absmiddle" style="vertical-align: middle;"></a>
<a href="http://thoselittlestickers.wordpress.com/" target="_new"><img src="images/wordpress_button.jpg" alt="Those Little Stickers Wordpress Page" width="38" height="36" border="0" align="absmiddle" style="vertical-align: middle;"></a>
<img src="images/youtube_button.jpg" alt="Those Little Stickers YouTube Page" width="38" height="36" border="0" align="absmiddle" style="vertical-align: middle;">
</div>
</div>
这是CSS：
@charset "utf-8";
/* CSS Document */
a img.hoverImage{
border: 2px solid #fff;
border-radius: 7px;
}
a img.hoverImage:hover{
box-shadow: inset 0px 0px 5px 2px #CCC;
}
a img.socialmedia:hover{
box-shadow: 0px 0px 7px 3px #ccc;
border-radius:50px;
}
a:link {
color: #999;
}
a:visited {
color: #3CF;
}
a:active {
color: #999;
}
/* div styles */
#container {
width:960px;
margin:0 auto;
}
#menu {
width:960px;
float:left;
}
#header_container {
float: left;
margin-bottom: 10px;
width: 960px;
border: solid #999 1px;
clear:left;
}
#about_us_header {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
width:670px;
text-align: left;
color: #777;
padding-left: 20px;
padding-right:20px;
padding-bottom:10px;
}
#gallery_container {
clear:left;
float:left;
width: 960px;
margin:0 auto;
border: solid #999 1px;
position:relative;
}
#gallery_pics1 {
float:left;
width:710px;
padding-bottom:10px;
padding-top:10px;
border-bottom: solid #999 1px;
border-right:solid #999 1px;
}
#gallery_pics2 {
float:left;
width:710px;
padding-bottom:10px;
padding-top:10px;
border-bottom: solid #999 1px;
border-right:solid #999 1px;
clear:left;
}
#gallery_pics3 {
float:left;
width:710px;
padding-bottom:10px;
padding-top:10px;
border-bottom: solid #999 1px;
border-right:solid #999 1px;
clear:left;
}
#gallery_pics4 {
float:left;
width:710px;
padding-bottom:10px;
padding-top:10px;
border-bottom: solid #999 1px;
border-right:solid #999 1px;
clear:left;
}
#categories {
clear:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#333;
text-align:right;
width:220px;
float:right;
}
#footer {
width:960px;
float:left;
clear: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #666;
padding-bottom: 4px;
border-top: solid #999 1px;
padding-top: 4px;
border-bottom: solid #999 1px;
margin-top:10px;
margin-bottom: 10px;
}
#site_map_footer {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: left;
text-decoration: underline;
width: 100%;
background-color: #333333;
padding-bottom: 10px;
letter-spacing: 1px;
clear: both;
color: #FFF;
}
非常感谢任何帮助。
答案 0 :(得分：0)
将它们包裹在单独的div中 - http://jsfiddle.net/1pfugm6n/
<div id="left">
....
</div>
<div id="right">
....
</div>
#left {
float: left;
}
#right {
float: right
}
答案 1 :(得分：0)
一种解决方案是绝对定位categories div：
#categories {
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#333;
text-align:right;
width:220px;
position:absolute;
right:0;
top:0;
}