html - 具体div定位

Question

我正在尝试为如下所示的网页设置页眉:

这是我目前正在尝试的代码:

HTML

<header id="top-section">
  <div class="content-wrapper">
      <div class="float-left">
          <a href="../Home/Index"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" alt="SustIMS" width="50%" height="50%" /></a>
      </div>
      <p class="user-info">
          <div class="user-info">
          Welcome Jon
          </div>
      <div class="float-right">
          <a href="Index">
          <img class="toolbar-icons" alt="Home" src="http://htiins.com/wp-content/uploads/2012/10/home-icon.png" /></a>
      </div>
      </p>
  </div>
</header>

CSS

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: rgba(240, 240, 240, 1); 
  border: 2px solid red;
}

.float-left {
    float: left;
    width: 200px;
    border: 2px solid cyan;
}

.float-right {
    float: right;
}


#top-section
{
    border: 4px solid blue;
    height: 120px;

}


.user-info
{
    float: right;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 1.25em;
    border: 2px solid green;

}

.toolbar-icons
{
    float: right;
    width: 100px;
    height: 100px;
    clear: both;
    border: 2px solid orange;
}

这是 Fiddle .

我设置了不同颜色的边框以更好地理解 div 的定位。

我怎样才能达到像上图这样的效果？

谢谢

*编辑**

也许这更好地解释了我正在寻找的东西:它应该是这样的:

感谢到目前为止的一些很好的回答!

Answer 1

移动

<p class="user-info">
<div class="user-info">
      Welcome Jon
</div>

进入我们的右浮动div并给header

的css样式

header{
    overflow:hidden;
    padding:10px;
}

以这个结果结束。

http://jsfiddle.net/P9Zjx/