定位元素CSS

Question

我最近开始学习CSS和少桌设计 现在回顾一些教程后，我参与将PSD Mockup转换为XHTML和CSS 最常见的问题是定位元素和容器 例如以下设计：
我正在将其转换为CSS和HTML 我对样式输入元素没有任何问题。 关于主要布局似乎有两列布局，对吧？ 如何设置容器样式？ 我写了这个code它显示得更好here 我将页面分成两个容器并将其值（浮动：左）放到左侧容器中 正如在jsFiddle中指定的那样，左侧容器中的链接元素已经开箱即用（我认为它是因为浮动）。 我无法将容器位置设置为绝对值。
现在请帮我重构和更改我的代码。
请向我解释如何正确定位元素？

Answer 1

我认为

  

<div style="clear:both;"></div>

在容器的</div>工作之前。

编辑： http://jsfiddle.net/xNwAc/5/

Answer 2

您必须在容器上设置新的格式化上下文，例如overflow:auto;。 我建议你阅读the specification，这是非常明确和有用的。

由于感叹号不是内容的一部分，您可以将其作为背景图像。

Answer 3

尝试使用包装元素来包含两列。使用W3C代码，您将需要使用浮动元素。元素没有任何填充，您可以自己处理它们，但这是一个非常基本的结构：

CSS：

#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}

HTML：

<div id="wrapper">
   <div id="left"> Left content </div>
   <div id="right"> Right content </div>
</div>