CSS 是構建網頁時必不可少的一項技術，它可以實現眾多網頁效果。CSS 的最大優勢在于分離結構與樣式，讓網頁的維護更加容易。而使用 CSS 來構建分兩欄頁面，也是前端開發常見的需求。

在 HTML 中，可以使用div標簽來將頁面劃分為多個區域。將整個頁面用一個div包裹起來，然后再為這個div添加兩個子元素，分別放置左右兩欄的內容。左欄可以使用float: left;的方式來實現。

<div class="container">
<div class="left">
<p>這里是左欄的內容。</p>
</div>
<div class="right">
<p>這里是右欄的內容。</p>
</div>
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}

以上代碼實現了左側 200px 的寬度，右側自適應容器的效果。但是，這種做法存在一個問題：當其中一個內容過長時，兩側會出現錯位。解決方案有兩種，一種是使用flexbox，一種是使用grid。這里介紹使用flexbox，因為它兼容性更好。

<div class="container">
<div class="left">
<p>這里是左欄的內容。</p>
</div>
<div class="right">
<p>這里是右欄的內容。</p>
</div>
</div>
.container {
display: flex;
}
.left, .right {
flex-grow: 1;
}
.left {
flex-basis: 200px;
background-color: #f0f0f0;
}
.right {
background-color: #ddd;
}

以上代碼使用了flex-grow來實現兩側的自適應，同時也解決了內容超出的問題。使用flexbox還可以實現其他復雜的布局效果，是前端開發的必備技術之一。