浮动属性（和其他）的问题

Question

好的，我正在为我的大学做一个项目，目标是建立一个至少有2个html页面和一个css表的网站。我的网站基本上是一个恶搞烧烤网站，我遇到的问题是，我想要我的＆＃34;概念图像＆＃34;显示在页面底部，客户的报价位于最右边但位于图片上方。目前，我的网站看起来像这样：http://puu.sh/pOV0U/8ecc14ddd8.jpg

使用css代码

#Quotes {
    float: right;
}

#Concepts {
    float: bottom;
}

另外，正如您从图像中看到的那样，即使使用单独的div标签，我的文本也会相互剪切，而且我通过在导航列表下插入符号等来修复它。

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Specials</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Contact Us!</a></li>
    </ul>
</nav>                  
                <br>
                <br>
                <br>
<div id="Quotes">
      <p>Having second thoughts about coming out to see us? Check out these kickass reviews!</p>
</div>

最后，我的文本修饰命令似乎无法正常工作

li {
    float: left;
    text-decoration: none;
}

但链接仍然有下划线。任何帮助将不胜感激。