Source-order 2 column fluid layout

I’ve got a nice fluid layout built. I’m trying to source-order it, but when I do, it breaks the layout.

“Main” is a container for both columns. The primary column is on the right and is fluid; the left is a fixed width.

CSS:

[CODE]#main {

}
#leftcol {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content {
margin-left: 200px;
border-left: 1px solid #000;
padding: 1em;
}
[/CODE]

HTML:

[CODE]<div id=”main”>
<div id=”content”>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.</p>
</div>
<div id=”leftcol”>
<p>This is the leftcol. This is the leftcol. This is the leftcol. This is the leftcol.</p>
</div>[/CODE]

When I place “leftcol” after “content” in the HTML, it appears below the main content instead of on the left.

Any ideas are welcome. Thanks!

Also in #CSS _↴