3 column layout - 3rd column dropping

[LostInFL]

I haven't actually made a 3 column structure before with only CSS.

The setup I have for HTML and CSS works great for 2 columns but the way I have set it up for three, the 3rd column (right side) drops below the others and yet stays floated where I need it.

I find that even if I wanted a 2 column layout with the right side being that column I still have issues.

Left and middle columns work as intended.

I got the CSS code (minus a few things I added like borders and min-width) from a website explaining the layout and that site's layout is fine.

The HTML looks like this. . .

<div id="colshell">
<div id="col1">
<div>Column 1</div>
</div>

<div id="col2">
<div>Column 2</div>
</div>

<div id="col3">
<div>Column 3</div>
</div>
</div>

And the CSS like this. . .

#colshell {
width: auto;
min-width: 900px;
margin: 0px auto;
text-align: left;
}

#col1 {
border: solid 1px #000;
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#col2 {
margin-left: 200px;
margin-right: 200px;
padding: 1em;
border: solid 1px #000;
min-width: 500px;
}

#col3 {
border: solid 1px #000;
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

Thanks.

[swa66]

I'd probably swap the order in the html: once the non-floated col2 has been rendered anything new (including a float) will start under it.

[LostInFL]

This is one of those errors where you really just want to smash your head into the keyboard because of how simple stupid it was.

That did the trick thanks.