As a beginner in CSS, I am attempting to implement a 3 column layout on the CSS garden's HTML. The following is my approach:
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;
}
However, the result shows that the third column is positioned below the other two columns and I am unsure how to bring it up.
I have attempted to resolve this using Fiddle here. Any assistance would be greatly appreciated. Thank you.
Edit: It should be noted that I cannot alter the structure of the HTML file. Thank you.