三栏布局一般指的是页面中一共有三栏， 左右两栏宽度固定，中间自适应的布局 ，三栏布局的具体实现：
利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
你的D不是和父容器宽度一样吗，如果D的父容器知道宽度，D就有宽度，进而B就有宽度。你的说法说存在有问题，那估计D的父容器也没有指定宽度。这些div宽度都没有可信赖可参照的宽度，自然有问题。换种方式，将B宽度设个固定值，A，C自适应，D设成display: inline-block，D宽=A+B+C。以这种方式看看能不能行。
<html>
<head>
<style>
#contant{
height:50pxborder:1px solid #000display: inline-block
}
#line{
width: 500height:10pxbackground:#222border:1px solid #000display: inline-blockmargin-top: 3px
}
#left{
float: leftbackground:#888display: inline-block
}
#right{
float: rightbackground: #bbbdisplay: inline-block
}
</style>
</head>
<body>
<div id="contant">
<div id="left">左</div>
<div id="line"></div>
<div id="right">右</div>
</div>
</body>
</html>
其实很简单，用四个DIV。将三个DIV放到一个大的DIV中。然后三个小DIV第一个用float:left第二个用float:right第三个不用float也不用position，只需要用margin-left:第一个div的宽度,margin-right:第二个div的宽度。将最大的DIV设置一下min-width属性。以免页面太窄，会将DIV挤下来。代码如下：
<div class="wrapper">
<div class="left">left </div>
<div class="right">right</div>
<div class="content">center</div>
</div>
<style type="text/css">
.wrapper{min-width:1000px}
.left{float:leftwidth:200px}
.right{float:rightwidth:200px}
.content{margin-left:210pxmargin-right:210px}
</style>
