Html 填充浮子左侧：全宽设计中的右侧元素

我正在用HTML5/CSS3进行一个新的设计，自从我上次使用html以来已经有一段时间了，我更多的是为了编写内容，而不是布局

我试图实现的是一个“全宽度”或者更确切地说是“80%宽度”的设计，这样它就可以适应低至800px的浏览器大小。（最小宽度）

内容的一部分将包含一个位于右侧的导航块（固定大小，比如300px），我通过使用float实现了这一点，尽管我已经学会了讨厌float，因为“clearfix”问题，但是缺少更好的

在左边，我希望内容占据右边浮动元素的空间

但是，如果内容超出宽度，则会向下推右浮动元素。

比如：

   -----------------------------------------------------------
          |                 Header                    |
          |                <header>                   |
          |-------------------------------------------|
   <-10%->|         <- Fill ->            |<- 300px ->|<-10%->
          |                               |           |
          |         <section>             |  <aside>  |
   -----------------------------------------------------------

侧边栏（id=侧边栏）设置为：

margin: 0 0 0 30px;
display: inline-block;
float: left;

margin: 0 30px 10px 30px;
width: 290px;   

border:1px solid #6B6B6B;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

box-shadow: 0px 0px 2px 1px #6B6B6B inset;

display: inline-block;
float: right;

解决方法：

• display:table和table cell可以工作，但它添加了我希望避免的额外标记，也不确定这是否适用于所有地方？
• flexbox？嗯，我也这么想，但有问题，但它并没有得到广泛的支持
• 让所有人都有固定的宽度
• 让所有对象都具有动态宽度。（哦，男孩）
• 表，但我们知道，所有的讨论都很好

---

现在我将正确处理列表中的第一个，因为这是目前唯一让我实现目标的方法，但我想看看是否有更干净的方法。我想尝试一下

下面是我将如何在您已有的HTML中标记它。基本上，我插入了另一个div来包含部分和旁白

<div id="contentContain">
    <div id="section"></div>
    <div id="aside"></div>
</div>

这段代码应该给你更多的视角，而且它是有效的，你可以把“更多”的内容放在一边，它不会破坏布局

---

祝你好运

像这样的怎么样？为左右部件创建一个容器。为合适的容器留出适当的空间。您可以浮动它，但我绝对定位了它，因为您讨厌浮动=）

div{边框：1px实心灰色；宽度：}
#容器{宽度：80%；最小宽度：600px；边距：0自动；}
#标题{高度：100px；}
#内容{位置：相对；}
#左{右边距：300px；高度：1000px；}
#右{宽度：300px；高度：500px；位置：绝对；顶部：0px；右：0px；}
标题
左边
赖特

我不想成为一个百分比，但一个固定的，有一个“contentContainer”是我的atm。为了包装它们，然后在容器上使用“display:table”，然后在侧边和部分使用“display:table cell”（分别是它们的ID），但如果可以的话，我想避免使用额外的html标记。这是“float”无法扩展容器的一小部分，或者CSS标记无法使其扩展的一小部分，我发现缺少，如果您可以指示他们是否扩展其parrent（或在parrent级别上要求其扩展到其浮动的子项或不扩展到其浮动的子项），则可以。。。但是必须使用一个额外的不可见div来重置浮动只是。。。好。。。您的解决方案并没有使我免于需要额外的“内容”容器，这正是我真正想要的，所以是否有任何理由将其用于“显示：表格”？（由于空间原因而产生的额外注释）这在某种程度上是我现在拥有的，只是我的实际页面使用了“旁白”、“部分”和“标题”标记而不是div：使用显示表单元格是完全合理的。IE7不支持，但我无论如何都不支持。你想要的似乎是不可能的，这是因为css规则的编写方式。没有任何概念，我希望你尽可能的大，除了这个。不过，我当然经常看到这个要求。也就是说，两个额外的标记或一个清除div实际上是获得所需内容的最小额外标记。我不会花任何时间担心那件事。好吧，我会坚持我现在的想法。当然，一个额外的容器可能是一个最小的增加，但如果我可以摆脱它，那么为什么不呢？。。。毕竟，一个额外的容器变成了to，如果一个人不小心的话，那么就变成了三个，所以这只是一个尽可能清楚的尝试，我认为这是可能的。我不再太在乎IE7的支持，这不是一个庞大的国际网站，这是一个个人博客，添加了一些投资组合、图库和其他主要针对IE7的东西，因此感兴趣的读者很可能会有一个更新的浏览器。尽管从技术角度看，我应该关心我在该领域的工作，但从长远来看，我可能会为这种情况添加一个特殊的处理程序，将不同的样式表交给较旧的浏览器（我应该能够在CSS路由处理程序/http处理程序中处理该样式表），并将其设计为静态。

#contentContain {width: 80%; }
#section {float:left; width: 60%;}
#aside {float:left; width: 40%; }

div { border: 1px solid gray; width: }
#container { width: 80%; min-width: 600px; margin: 0 auto;  }
#header { height: 100px; }
#content { position: relative; }
#left { margin-right: 300px; height: 1000px; }
#right { width: 300px; height: 500px; position: absolute; top: 0px; right: 0px; }

<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</div>