Как плавать <div> влево и вправо

Так что я был в этом немного осторожен, и я не могу понять, как это понять. Я работаю над заданием для своего веб-класса dev, и для его части мне нужно сделать два списка ссылок, и они должны иметь тип столбца.

Итак, прямо сейчас для моего HTML я имею:

<div id="linkCol1">
       <div class = "colHeading">For Standard Travelers</div>
            <ul>
                <li><a href="#">Standard seating chart</a></li>
                <li><a href="#">Find out why our flights are so unique</a></li>
                <li><a href="#">Read our insurance polic</a></li>
                <li><a href="#">Join our frequent flyer club</a></li>
                <li><a href="#">More Travel Resources...</a></li>
           </ul>
    <div id="linkCol2">
        <div class = "colHeading"> For "Others"</div>
            <ul>
                <li><a href="#">Effect of electromagnetism on travelers</a></li>
                <li><a href="#">Flying with animals</a></li>
                <li><a href="#">Non-Smoking policy</a></li>
                <li><a href="#">More Travel Resources...</a></li>
            </ul>
        </div>
    </div>

И для моего CSS (я вынул все, что, как я думал, не работал):

#linkCol2{
   overflow:hidden;
   float:right;
}

#linkCol1{
   float:left;
   overflow:hidden;
}

Теперь моя страница должна выглядеть примерно так:

http://ista230.com/images/assignments/7/page1.jpg

Если вы посмотрите на дно, вы увидите множество ссылок.

Любая помощь будет замечательной! (CSS 3 и HTML 5)