Pure CSS Two Divs Layout Fill First Column With Second Column Text - css

Question

Given This markup
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>
Also Hosted At: http://jsfiddle.net/bbQPE/1/
Is It Possible to fill the space in column one with the text in column two?
PS: Without a fixed width and the float for column2 seems to be the answer but seems like a hack more than a pure-css solution or m i wrong.?

Answer 1

Remove floating form column2
#column2 {
width: 570px;
padding-left: 10px;}