CSS - fluid 3 column layout with float

Question

I'm a newbie in CSS and I'm trying to apply the 3 column layout to CSS garden's html . Below is how I do it:

HTML:

<div id="container">
    <div id="pageHeader">Hello</div>
    <div id="quickSummary">Hello 1</div>
    <div id="preamble">Hello 2</div>
    <div id="explanation">Hello 3</div>
    <div id="link">List</div>
</div>​

CSS:

#pageHeader, #quickSummary
{
    float: left;
    clear: left;
}
#preamble, #explanation
{
    margin-left: 100px;
    margin-right: 100px;
}
#link
{
    float: right;
}

Then the result turns out that the 3rd column is put under the remaining two columns and I don't know how to "push it up".

I've tried it with Fiddle here . Please help me out and thanks.

Edit: I forgot to mention that I'm not supposed to change the structure of the HTML file. Thank you.

Answer 1

Simple approach in your case when height of elements are set would be to change:

#link {
  float: right;
  position: relative;
  top: -100px;
}

or maybe even:

#link {
  position: absolute;
  top: 0;
  right: 0;
}