보통 HTML에서 다음과 같은 구조로 레이아웃을 작성합니다.

<div class="container">
  <div class="left-column">왼쪽 컨텐츠</div>
  <div class="right-column">오른쪽 컨텐츠</div>
</div>

그리고 CSS에서는 다음과 같이 스타일을 지정할 수 있습니다.

.container:after {
  content: "";
  display: table;
  clear: both;
}

.left-column {
  float: left;
  width: 50%;
}

.right-column {
  float: right;
  width: 50%;
}

여기서 .container:after는 부모 요소인 .container의 모든 자식 요소의 높이를 포함하는 가상 요소를 만들고, clear: both 속성을 사용하여 부모 요소의 높이를 자식 요소의 높이에 맞게 조정합니다. 또한 .left-column과 .right-column은 50%의 너비를 갖도록 지정되어 있어 전체 너비를 사용하는 레이아웃이 완성됩니다.

이 방법을 사용하면 두 개의 컬럼이 있을 때도 레이아웃이 쉽게 조정되며, 다양한 화면 크기에서도 유연하게 동작할 수 있습니다.