浮动div从另一个全宽浮动div开始

Question

我有两列，在左列中，我使用负边距使.title扩展了屏幕的整个宽度。在右栏上，我有.sidebar，我希望它出现在扩展的.titlediv下面。运行下面的代码片段，你会看到它在同一行开始。换句话说，我希望橙色div低于黄色div。

我不想在.sidebar上使用margin-top，因为左列中.title的高度不同。

我意识到使用javascript是可能的，但我正在寻找一个只使用html和css的更强大的解决方案，这可能吗？

如果更方便的话，我还制作了一把小提琴http://jsfiddle.net/2dLaw17r/1/

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}
.left .title {
    margin:0 -500%;
    padding:0 500%;
    background: yellow;
}
.right{
    float:right;
    width:40%;
    background:orange;   
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
    <div class="left">
      <article>            
         <div class="title">Title extends beyond container</div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
      <article>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>

Answer 1

在包含文章内容的文章中放置一个div。这样，标题和内容都保留在文章中。接下来，向左浮动文章内容，向右浮动侧边栏。不再需要负保证金技巧：

.container {
  width: 600px;
  margin: 0 auto;
  clear: both;
  padding: 1em;
  background: grey;
}
.title {
  background: yellow;
  /* eye candy only */
  margin: 0 -1em;
  padding: 0 1em;
}
.left {
  float: left;
  width: 60%;
}
.right {
  float: right;
  width: 40%;
  background: orange;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
  <article>
    <div class="title">Title extends beyond container<br>And can grow in height</div>
    <div class="content left">
      <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
  </article>
  <div class="sidebar right">
    <p>items in this sidebar div should fall below the title div. Currently it starts on the same line.</p>
  </div>
</div>

Answer 2

问题在于您的设计，而不是CSS。。。如果你仔细规划布局，你可以完全避免的负边距。我方建议的可能解决方案如下：

重新设计您的标记并以更有用的方式重命名类：

摆弄更新的标记

HTML

<div class="container clearfix">
    <div class="left">
        <div class="title">Title extends beyond container</div>
        <div class="right">
            <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
        </div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
</div>

CSS

html, body { /* always mention this in you CSS - rule of Thumb for CSS */
    width:100%;
    height:100%;
    margin:0;
    padding:0
}
.container {
    width:100%; /* stretch div to take full width of parent - HTML, BODY*/
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;
}
.left {
    /* float:left;*/ /* not needed with updated layout :) */
    width:100%;
}
.left .title {
    /*margin:0 -500%;  
    padding:0 500%;  /* nightmare is removed */ */
    width:100%;
    background: yellow;
}
.right {
    float:right;
    width:40%;
    background:orange;
}
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}

Answer 3

就像Antoine说的，你必须把标题放在左边的div之外。

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}
.title {
    
    background: yellow;
}
.right{
    float:right;
    width:40%;
    background:orange;   
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
    <div class="title">Title extends beyond container</div>
    <div class="left">
        
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>

Answer 4

您必须清除浮动，如：

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}
.left .title {
    margin:0 -500%;
    padding:0 500%;
    background: yellow;
}
.right{
    float:right;
    width:40%;
    background:orange;   
    clear: left;/*add clear left*/
    margin-top: -60px;/*add negative top margin*/
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
    <div class="left">
        <div class="title">Title extends beyond container</div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>