Divs不会浮动

Question

我一直在尽一切可能尝试将侧边栏浮动到左侧，并使其适合旁边的内容div，但它似乎对我来说是不可能的。请帮忙。

HTML：

<div class="index-page">  

     <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header"> 
     <h1> Welcome to Elektrik Host! </h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo.</p> 
     <h1> A little about us </h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo.</p> 
    </div><!-- //index-page --> 
    <div class="sidebar"> 

     <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"> 

    </div><!-- //.sidebar --> 

CSS：

.index-page { color: #000; width: 462px; } 
.sidebar { float: right; width: 200px; } 

clearfix：

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

Answer 1

1. .sidebar { float: left; width: 200px; }不right
2. 为了让他们身旁：
       - 索引页还需要floatleft太index-page{ float: left;}（FF需求，即不）
       - 移动工具条索引页的前

Answer 2

您可以按照本教程：http://css.maxdesign.com.au/floatutorial/index.htm

CSS代码

.floatright { float: right; } 

HTML代码

<p> 
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"> 
<p> 

你不需要做的正好类应用单一的形象。

PK

Answer 3

我总觉得它更容易把float -ing内容提前，使得这样它的内容，所以我切换侧边栏来提前index-page股利，并用以下CSS：

.sidebar { 
    width: 200px; 
    float: left; 
    } 

演示结束于JS Bin。