0
我有一个容器div围绕其他5个div。容器是960px，我想浮动左边的前4个divs，宽度为710px，并且将第5个和最后一个div浮动在其他4个内部div的右上角。我已经研究并尝试了很多不同的东西，但无法弄清楚它为什么浮在容器div的底部。Divs不正确/浮动与父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;
}
任何帮助将不胜感激。
谢谢SOOOO多！这工作完美。这是我没有尝试过的唯一的事情。我甚至没有为他们输入CSS，只是在HTML中的div，它已经工作。现在添加css。再次感谢，你不知道我是多么高兴和感激！ – 2014-09-29 21:14:36
很高兴帮助:)如果你认为它足够好，即使我发布了不必要的CSS，你也可以接受我的答案:) – Adrian 2014-09-29 21:19:44
对不起，我是一个新手。我认为添加1是它，它不会允许我，但我找到了复选标记。我会很乐意接受这个答案！再次感谢！！ – 2014-09-29 21:32:30