纯CSS两个分区布局用第二列文本填充第一列

Question

鉴于此标记

CSS

#wrapper {
    width: 900px;
}
#column1 {
    width: 320px;
    float: left;
}
#column2 {
    width: 570px;
    float: left;
    padding-left: 10px;
}
#social {
    text-align: center
}
​

HTML

<div id="wrapper">
    <div id="column1">
        <div id="image">
            <a href="http://stackoverflow.com">
                <img width="320" src="http://appharbor.com/assets/images/stackoverflow-logo.png">
            </a>
        </div>
        <div id="social">
            Some Social Plugins/Buttons Whatever
        </div>
    </div>
    <div id="column2">
        <div>
            SOME REALLY LONG CONTENT WHICH IS USER-GENERATED (Can't be styled or this structure of divs and br be expected)
        </div>
        <br />
        <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ante ac dolor interdum tristique vitae sit amet erat. Quisque auctor sagittis augue, vitae eleifend nibh egestas quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris condimentum varius orci, ac accumsan mauris viverra nec. Nunc ullamcorper dapibus velit, ac vehicula turpis placerat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </div>
        <br />
        <div>
           Vivamus quis sem lectus. Phasellus lobortis semper nulla, ut imperdiet neque aliquam at. In tincidunt, mauris quis condimentum tempor, tellus magna mollis magna, a laoreet purus metus id tellus. Proin sagittis, sapien a tristique consequat, tellus neque feugiat massa, vel vulputate ligula lectus nec enim. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
        <br />
        <div>
            Suspendisse dapibus diam eu felis convallis sed iaculis lorem aliquam. Duis sit amet metus a lectus commodo sodales vel a lacus. Praesent auctor facilisis ligula vitae convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mi leo, ultrices vitae consequat at, luctus in arcu. In tincidunt pellentesque ornare. Sed laoreet porta ante, at euismod ipsum volutpat facilisis. Donec at augue iaculis ligula interdum consequat vitae quis turpis. Donec pulvinar velit nec arcu eleifend faucibus. Praesent placerat magna eget ipsum iaculis nec condimentum nibh egestas. Donec massa tellus, porttitor vitae posuere sed, dapibus quis sapien. Sed elit est, dapibus sit amet pulvinar et, volutpat non quam. Aenean eget est tellus. Mauris at tincidunt dui.
        </div>
        <br />
        <div>
            SOME REALLY LONG CONTENT WHICH IS USER-GENERATED (Can't be styled or this structure of divs and br be expected)
        </div>
    </div>
</div>

还托管于：http://jsfiddle.net/bbQPE/1/

是否可以用第二列中的文字填充第一列的空格？

PS：没有固定的宽度，并且第2列的浮点似乎是答案，但看起来像是一个纯粹的css解决方案或者我错了。？

Answer 1

删除浮动表单column2  #column2 { width: 570px; padding-left: 10px;}