我们经常看到这样的布局方式：左边的侧边栏宽度固定，右边的主要内容区域宽度自适应变化。现在提供一个css布局方式。

html代码：

<div class="row">

　　<div class="side">

　　　　<img src="side.png" alt="order">

　　　　<p>In restaurants, pizza can be baked in an oven with stone bricks above the heat source, an electric deck oven, a conveyor belt oven or a wood- or coal-fired brick oven.</p>

　　　　<button>Order</button>

　　</div>

　　<div class="main">

　　　　<img src="pizza.png" alt="pizza">

　　　　<h1>Pizza</h1>

　　　　<p>Various types of ovens are used to cook them and many varieties exist.</p>

　　</div>　　

</div>

css代码：

* {

　　margin: 0;

　　padding: 0;

　　box-sizing: border-box;

}

.row {

　　position: relative;

　　width: 100%;

　　background: #000;

}

布局采用的思路是：左边side列采用绝对定位，脱离文档流，右边的main列宽度100%，会自然地顶上来。但是我们看到的场景是side列浮在main列的上方。这时候通过设置main列的padding-left = side列的宽度实现内容不相互遮挡。

.side {

　　position: absolute;/*脱离文档流，让右侧能顶上来*/

　　top: 0;

　　left: 0;

　　width: 300px;

　　height: 500px;

　　background: #C0392B;

}

.main {

　　width: 100%;

　　height: 500px;

　　background: #E74C3C;

　　padding-left: 300px;/*左侧的宽度*/

}